Fatal编程技术网

Javascript 用html键盘输入

javascript html keyboard

Javascript 用html键盘输入,javascript,html,keyboard,Javascript,Html,Keyboard,我正在尝试创建一个html/javascript键盘来填充输入 问题是，当用户在输入的中间选择并点击任何键盘按钮时，字符将被添加到输入的末端。 <input type="text" id="input"/> <button onclick="document.getElementById('input').value+=this.innerHTML;document.getElementById('input').focus()">A</button> <

我正在尝试创建一个html/javascript键盘来填充输入

问题是，当用户在输入的中间选择并点击任何键盘按钮时，字符将被添加到输入的末端。

<input type="text" id="input"/>
<button onclick="document.getElementById('input').value+=this.innerHTML;document.getElementById('input').focus()">A</button>
<button onclick="document.getElementById('input').value+=this.innerHTML;document.getElementById('input').focus()">B</button>
<button onclick="document.getElementById('input').value+=this.innerHTML;document.getElementById('input').focus()">C</button>


A.
B
C
任何解决方案

jsidle

在不纠正代码段中任何其他错误的JS实践的情况下，正确的解决方案包括使用
selectionStart

document.getElementById('input').value = 
    document.getElementById('input').value.substr(
        0, document.getElementById('input').selectionStart) +
    this.innerHTML +
    document.getElementById('input').value.substr(
        document.getElementById('input').selectionStart);
document.getElementById('input').focus();
我更新了您的JSFIDLE以获得一个有效的示例。 


测试
var-cursorLocation=0；
函数insertValue（按钮勾选）{
var input=document.getElementById（'input'）；
input.value=input.value.substring（0，游标位置）+buttonClicked.innerHTML+input.value.substring（游标位置）；
光标位置+=1；
}
//在此处找到脚本：
// http://stackoverflow.com/questions/2897155/get-cursor-position-within-an-text-input-field
函数doGetCaretPosition（oField）{
//初始化
var-iCaretPos=0；
//IE支持
if（文档选择）{
//将焦点设置在元素上
oField.focus（）；
//要获取光标位置，请获取空的选择范围
var oSel=document.selection.createRange（）；
//将选择开始移动到0位置
oSel.moveStart（'character'，of ield.value.length）；
//插入符号位置是选择长度
iCaretPos=oSel.text.length；
}
//Firefox支持
else if（oField.selectionStart | | oField.selectionStart==“0”）
iCaretPos=oField.selectionStart；
//返回结果
光标位置=iCaretPos；
}
A.
B
C
完整示例（缺少一些数字等） 你可以指出你想要的地方。。它就在那里

动态创建键盘，仅创建一个eventlistener

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>keyboard</title>
<style>
body>div{
 clear:both;
 overflow:auto;
 border:2px solid grey;
}
body>div>div{
 width:64px;line-height:64px;float:left;
 border:1px solid grey;
 text-align:center;
}
</style>
<script>
(function(W){
 var D,K,I,pos=0;
 function init(){
  D=W.document;
  I=document.createElement('input');
  document.body.appendChild(I);
  K=D.createElement('div');
  K.id="k";
  K.addEventListener('click',h,false);
  var L='a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z'.split(','),
  l=L.length;
  for(var a=0;a<l;a++){
   K.appendChild(document.createElement('div')).innerText=L[a];
  }
  document.body.appendChild(K);
 }
 function h(e){  
  if(e.target.parentNode.id=='k'){
   pos=(I.selectionStart?I.selectionStart:pos?pos:0);
   var end=I.selectionEnd?I.selectionEnd:pos;
   I.value=I.value.substr(0,pos)+
   e.target.innerText+
   I.value.substr(end);
   I.focus();
   pos++
   I.selectionStart=pos;
   I.selectionEnd=pos;
  }
 }
 W.addEventListener('load',init,false);
})(window)
</script>
</head>
<body>
</body>
</html>


键盘
正文>div{
明确：两者皆有；
溢出：自动；
边框：2倍纯色灰色；
}
正文>div>div{
宽度：64px；线条高度：64px；浮动：左侧；
边框：1px纯灰；
文本对齐：居中；
}
（功能（W）{
变量D，K，I，pos=0；
函数init（）{
D=W.文件；
I=document.createElement（“输入”）；
文件.正文.附件（一）；
K=D.createElement（'div'）；
K.id=“K”；
K.addEventListener（'click'，h，false）；
变量L='a、b、c、d、e、f、g、h、i、j、k、L、m、n、o、p、q、r、s、t、u、v、w、x、y、z'。拆分（'，'），
l=l.长度；

对于（var a=0；另一个不提供解决方案，但更好的方法是为所有按钮使用一个函数，而不是为每个按钮使用一个新的javascript，因为您所更改的只是输入值：您可以轻松地在纯javascript中复制它。我正在演示一个概念，这在纯javascript中不起作用（函数）当我单击按钮A时，焦点从输入中丢失…如何避免这种情况？解决方案
document.getElementById（'input'）.focus（）
已将输入返回焦点。请仔细检查该行是否粘贴正确。我知道……我问了其他问题。当我在中间写入内容时，输入将触发，并从结尾开始写入

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>keyboard</title>
<style>
body>div{
 clear:both;
 overflow:auto;
 border:2px solid grey;
}
body>div>div{
 width:64px;line-height:64px;float:left;
 border:1px solid grey;
 text-align:center;
}
</style>
<script>
(function(W){
 var D,K,I,pos=0;
 function init(){
  D=W.document;
  I=document.createElement('input');
  document.body.appendChild(I);
  K=D.createElement('div');
  K.id="k";
  K.addEventListener('click',h,false);
  var L='a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z'.split(','),
  l=L.length;
  for(var a=0;a<l;a++){
   K.appendChild(document.createElement('div')).innerText=L[a];
  }
  document.body.appendChild(K);
 }
 function h(e){  
  if(e.target.parentNode.id=='k'){
   pos=(I.selectionStart?I.selectionStart:pos?pos:0);
   var end=I.selectionEnd?I.selectionEnd:pos;
   I.value=I.value.substr(0,pos)+
   e.target.innerText+
   I.value.substr(end);
   I.focus();
   pos++
   I.selectionStart=pos;
   I.selectionEnd=pos;
  }
 }
 W.addEventListener('load',init,false);
})(window)
</script>
</head>
<body>
</body>
</html>