How to make an onscreen keyboard for special characters for easy input on a website form

+1 Mwangi CJ · February 9, 2016
I a need an onscreen keyboard for inputting some special characters such as the one below/images/forum/upload/2016-02-09/d129b79d6c0fe62f6377c0ef17cd8228.png
This one I took screen short from Duolingo. 
Any ideas?

Post a Reply

Replies

Oldest  Newest  Rating
0 Miss Protocol · February 9, 2016
you have to use javascript to do this
0 ‫Kode Rex · February 28, 2016
You need to use Javascript for this, by simply using the onClick() event you will be able to add value to your text field or form. i.e.
<input type="button" class="btn" value="0" onclick="javascript:add_form('calc',0);">
<input type="button" class="btn" value="1" onclick="javascript:add_form('calc',1);">

And as like this you'll be able to insert special characters as well.

If you want to check out a demo please goto,

http://www.webestools.com/ftp/ybouane/scripts_tutorials/javascript/calculator/calculator.html
0 ivan garcia · March 4, 2016
This is the manner. Please, see that I have a list of special characters and one <div> tag to insert it. When you hit letter 'á' function insert() will 'inject' the special character inside <div>. Note that <li> tag has method triggers a method (onclick) which calls function "insert()" with the code of a special character: "&aacute". In this case á = &aacute; Please, note that in order to complete this program, you have to do two more things:
1) add more special characters (ex. <li onclick="insert('&iecute')" id="a1">&iecute;</li>) for é,
2) force insertion when you are currently pointing(because it only inserts at the final). Hope this helps.

<!DOCTYPE HTML>
<html><head><title>My Digital Keyboard</title>
<style>
 body{font-size:20px;}
 #insert_here{border:1px solid #000000;padding-left:5px; width:25%;}
 ul {color:blue;text-decoration:none; display:block; list-style:none;}
 ul > li {float:left; text-decoration:none; padding-left:10px;}
</style>
</head>
<body>
<div contentEditable id="insert_here">
I am the sentence that will have a special character!
</div>

<ul>
<li onclick="insert('&aacute')" id="a1">&aacute;</li>
</ul>

<script>
function insert(a){
 document.getElementById("insert_here").innerHTML += a;
}
</script>
</body>
</html>
  • 1

HTML / CSS / Web Design

129,703 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators