制作自己的虚拟键盘
Posted
技术标签:
【中文标题】制作自己的虚拟键盘【英文标题】：Making own virtual keyboard 【发布时间】：2011-10-14 10:52:18 【问题描述】：我想使用 javascript 。
请告诉我如何向文本框添加字符的语法。添加第一个字符很容易，但添加第二个我无法做到。
任何人都请给出提示/逻辑以将文本添加到 keypress 上的文本框。
【问题讨论】：
到目前为止你有什么代码？ 【参考方案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="←">
<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>
【讨论】：
以上是关于制作自己的虚拟键盘的主要内容，如果未能解决你的问题，请参考以下文章