CODEWITHSUNDEEP
javascripthtmlkeyboard
AMD
AMD

Reputation: 1268

Input with html keyboard

I'm trying to create a html/javascript keyboard which will fill an input

The problem is that when the user selects in the middle of input and clicks any keyboard button the character will be added to the end of the input.

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

Any solution

Jsfiddle here

Upvotes: 0

Views: 2239

Answers (3)

cocco
cocco

Reputation: 16716

Full example (missing some numbers etc..) can point whereveryou want.. and it stays there.

Creates the keyboard dynamically,only one 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>

ps.: I tested in Chrome.

EDIT

the only thing that doesnot work is if you select a text and write before deleting it it starts where te selection starts and leaves yor other selected letters where they are.

EDIT 2 everything you expect works

Upvotes: 2

DEMWilson
DEMWilson

Reputation: 1

I updated your JSfiddle to have a working example. 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>

Upvotes: 0

Brian
Brian

Reputation: 7654

Without correcting any other bad JS practices in the snippet, the correect solution consists of the use of 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();

Upvotes: 1

Related Questions