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

完全な例 (いくつかの数字が欠落しているなど..) は、好きな場所を指すことができ、そこにとどまります。

キーボードを動的に作成します。イベントリスナーは 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あなたが期待するものはすべて動作します

于 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 に答える