0

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

4

3 回答 3

1

在不纠正代码片段中任何其他不良 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();
于 2013-08-19T15:58:54.070 回答
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 中测试过。

编辑

唯一不起作用的是，如果您选择一个文本并在删除它之前编写它，它会从选择开始的地方开始，而将其他选定的字母留在它们所在的位置。

编辑 2 你期望的一切都有效

于 2013-08-19T16:30:28.090 回答
0

我更新了您的 JSfiddle 以获得一个工作示例。 关联

<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-19T16:24:11.427 回答