用html键盘输入

我试图创建一个html/javascript键盘，它将填充输入用html键盘输入

问题是，当用户在输入中选择并点击任何键盘按钮时，角色将被添加到输入的结尾。

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

任何解决方案

的jsfiddle here

来源

2013-08-19 AMD

不提供解决方案，但这样做是有一个功能，所有按钮，而不是让JavaScript来每一个新的位，当所有你改变一个更好的办法是输入值：http://jsfiddle.net/MaXef/ – harryg

我不使用jQuery – AMD

您可以轻松地在纯JavaScript中复制它。我正在演示 – harryg

完整的示例（缺少一些数字等）可以指向whereveryou想..它在那里停留。

动态创建键盘，只有一个事件侦听

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

PS：我在Chrome测试。

编辑

是亘古不变的工作的唯一的事情是，如果你选择一个文本，并删除之前写它开始的地方TE的选择开始，叶侑其他选定的字母他们在哪里。你期望

EDIT 2一切正常

来源

2013-08-19 16:30:28 cocco

没有在片段纠正任何其他不良JS手法，correect解决方案包括使用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();

来源

2013-08-19 15:58:54 Brian

工作，当我点击按钮A焦点从输入丢失...如何避免这种情况？ – AMD

解决方案'document.getElementById（'input'）。focus（）;'已经使您的输入重新成为焦点。仔细检查您是否已正确粘贴该行。 – Brian

我知道...我问了别的。当我在中间写一些东西时，输入将会触发，并且从最后开始写入 – AMD

我更新了你的JSfiddle来创建一个工作示例。 Link

<html> 
<head> 
    <title>Testing</title> 
    <script type="text/javascript"> 
     var cursorLocation = 0; 
     function insertValue(buttonClicked) { 
      var input = document.getElementById('input'); 
      input.value = input.value.substring(0, cursorLocation) + buttonClicked.innerHTML + input.value.substring(cursorLocation); 
      cursorLocation += 1; 
     } 

     // Script found here: 
     // http://stackoverflow.com/questions/2897155/get-cursor-position-within-an-text-input-field 
     function doGetCaretPosition(oField) { 

      // Initialize 
      var iCaretPos = 0; 

      // IE Support 
      if (document.selection) { 

       // Set focus on the element 
       oField.focus(); 

       // To get cursor position, get empty selection range 
       var oSel = document.selection.createRange(); 

       // Move selection start to 0 position 
       oSel.moveStart ('character', -oField.value.length); 

       // The caret position is selection length 
       iCaretPos = oSel.text.length; 
      } 

      // Firefox support 
      else if (oField.selectionStart || oField.selectionStart == '0') 
       iCaretPos = oField.selectionStart; 

      // Return results 
      cursorLocation = iCaretPos; 
     } 
    </script> 
</head> 
<body> 
    <input onblur="doGetCaretPosition(this)" type="text" id="input"/> 

    <button onclick="insertValue(this)">A</button> 
    <button onclick="insertValue(this)">B</button> 
    <button onclick="insertValue(this)">C</button> 
</body> 
</html>

来源

2013-08-19 16:24:11 DEMWilson

用html键盘输入

回答

相关问题