制作自己的虚拟键盘答案

【问题标题】：Making own virtual keyboard制作自己的虚拟键盘
【发布时间】：2011-10-14 10:52:18
【问题描述】：

我想使用 JavaScript 制作自己的虚拟键盘。

请告诉我如何向文本框添加字符的语法。添加第一个字符很容易，但添加第二个我无法做到。

任何人都请给出提示/逻辑以将文本添加到 keypress 上的文本框。

【问题讨论】：

到目前为止你有什么代码？

标签： javascript virtual-keyboard

【解决方案1】：

Teneff 说的是开始.. 下面的代码将为您提供提示..

<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>

【讨论】：

请记住，当您按下键盘上的某个键时，光标并不总是位于文本的末尾

【解决方案2】：

1：获取所有可以使用虚拟键盘在里面书写的字段

2：将onfocus事件附加到每个字段，以了解哪个字段被选中

3：按下键盘上的键后，将字母添加到值并将焦点返回到字段

THIS is a simple example I've wrote

【讨论】：

【解决方案3】：

如果问题是字符被覆盖，请确保将下一个字符添加到文本框中，而不是简单地覆盖它。即，如果您的文本框包含“a”

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

【讨论】：

【解决方案4】：

如果你想让它变得更好，那就是这个，我没有完全做到，只是偷了代码；）

<!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>

【讨论】：