用 html 键盘输入答案

【问题标题】：Input with html keyboard用 html 键盘输入
【发布时间】：2013-08-19 15:53:02
【问题描述】：

我正在尝试创建一个 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>

任何解决方案

Jsfiddle here

【问题讨论】：

不提供解决方案，但更好的方法是为所有按钮设置一个功能，而不是在您更改的只是输入值时为每个按钮添加新的 javascript： jsfiddle.net/MaXef
您可以在纯 javascript 中轻松复制它。我在演示这个概念
这在纯javascript（函数）中不起作用

标签： javascript html keyboard

【解决方案1】：

完整示例（缺少一些数字等）可以指向任何你想指向的地方。它会一直呆在那里。

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

<!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 中测试过。

编辑

唯一不起作用的是，如果您选择了一个文本并在删除它之前写入，它从选择开始的地方开始，而将其他选定的字母留在原处。

EDIT 2 你期望的一切都有效

【讨论】：

【解决方案2】：

在不纠正 sn-p 中任何其他不良 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();

【讨论】：

当我点击按钮 A 时，焦点从输入中丢失了......如何避免这种情况？
解决方案document.getElementById('input').focus(); 已经让您的输入重新成为焦点。仔细检查您是否正确粘贴了该行。
我知道...我问了其他问题。当我在中间写东西时，输入会触发，它会从最后开始写

【解决方案3】：

我更新了您的 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>

【讨论】：