CODEWITHSUNDEEP
javascriptvirtual-keyboard
Mad coder.
Mad coder.

Reputation: 2175

Making own virtual keyboard

I want to make my own virtual keyboard using JavaScript.

Please tell me the syntax how to add characters to a TextBox. Adding the first character is easy but adding the second one I am unable to do.

Anybody please give a hint/logic to add text to textbox on keypress.

Upvotes: 2

Views: 5513

Answers (4)

Null7
Null7

Reputation: 1

There's this if you want to make it better I didn't make it fully just stole code ;)

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>Text</title>


<style media="screen">
body {
    background-color: #f0f0f0;
}
#keyboard {
    display: inline-block;
    padding: 10px 15px;
    border: 1px solid #009;
    border-radius: 10px;
    background-color: #777777;
    text-align: center;
    box-shadow: 4px 4px 4px #999;
}
#keyboard div {
    margin: 5px 0;
}
#space {
    width: 184px;
}
#keyboard label {
    margin-top: 20px;
    font-family: serif;
    text-decoration: underline;
}
#keyboard input {
    box-shadow: 2px 2px 2px #666;
}
#keyboard input[type="text"] {
    margin-top: 20px;
    border: 1px solid #666;
    border-radius: 4px;
    box-shadow: none;
}
#keyboard #back {
    font-weight: bold;
 }
 

#keyboard-placement {
    position: absolute;
    bottom: 10px;
    margin-left: 39%;
}
</style>
<div id="keyboard-placement">
<script>
(function() {
   'use strict';
   var i,c;
function init(){ 
/* get all the input elements within the div whose id is "keyboard */
   i=document.getElementById('keyboard').getElementsByTagName('input'); 
/* loop through all the elements */   

for(c=0;c<i.length;c++) {
/* find all the the input type="button" elements */
if(i[c].type==='button') { 
 /* add an onclick handler to each of them  and set the function to call */
   i[c].addEventListener('onclick',makeClickHandler(c));
   }
  }

/* this is the type="reset" input */
document.getElementById('clear').onclick=function() {
/* remove all the characters from the input type="text" element */
   document.getElementById('text').value='';
  }
 }

function makeClickHandler(c) {
   i[c].onclick=function() {
/* find the non-text button  which has an id */
if(i[c].id==='back') {
/* remove last character from the input the type="text" element using regular expression */
   document.getElementById('text').value=
   document.getElementById('text').value.replace(/.$/,'');
 }
/* find the text buttons */
else {
/* add characters to the input type="text" element */
   document.getElementById('text').value+=this.value.toLowerCase();
   }
  };
 }

   window.addEventListener?
   window.addEventListener('load',init,false):
   window.attachEvent('onload',init);
})();
</script>

</head>
<body>

<div id="keyboard" >

<div>
 <input type="button" value="Q">
 <input type="button" value="W">
 <input type="button" value="E">
 <input type="button" value="R">
 <input type="button" value="T">
 <input type="button" value="Y">
 <input type="button" value="U">
 <input type="button" value="I">
 <input type="button" value="O">
 <input type="button" value="P">
</div><div>
 <input type="button" value="A">
 <input type="button" value="S">
 <input type="button" value="D">
 <input type="button" value="F">
 <input type="button" value="G">
 <input type="button" value="H">
 <input type="button" value="J">
 <input type="button" value="K">
 <input type="button" value="L">
</div><div>
 <input type="button" value="Z">
 <input type="button" value="X">
 <input type="button" value="C">
 <input type="button" value="V">
 <input type="button" value="B">
 <input type="button" value="N">
 <input type="button" value="M">
</div><div>
 <input id="back" type="button" value="&#8592;">
 <input id="space" type="button" value=" ">
 <input id="clear" type="reset" value="clear">
</div><div>
<label>Track Search</label> - <input id="text" type="text" readonly="readonly">
</div>

</div>
</div>

</body>
</html>

Upvotes: 0

Teneff
Teneff

Reputation: 32158

1: Get all fields that will be able to write inside using the virtual keyboard

2: Attach an onfocus event to each field to know which was the selected field

3: After pressing the key on the keyboard add the letter to the value and return the focus to the field

THIS is a simple example I've wrote

Upvotes: 3

Jordan Wallwork
Jordan Wallwork

Reputation: 3114

If the issue is that the character is being overwritten, make sure you're adding the next character to the textbox rather than simply overwriting it. Ie if your textbox contained "a"

textbox.value += 'b'; // would result in "ab"
textbox.value = 'b'; // would result in "b"

Upvotes: 0

ravi404
ravi404

Reputation: 7309

What Teneff said is the beginning.. this following code will be a hint for you.. 

<form name="virtual">
<input type="text" name="text"/>
<input type="button" onclick="a()" value="a" style="border:none;"/>
</form>
<script type="text/javascript">
 function a(){
    document.forms["virtual"]["text"].value += "a";
}
</script>

Upvotes: 3

Related Questions