Input with html keyboard

Question

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

Not providing the solution but a better way of doing this is to have one function for all the buttons rather than have a new bit of javascript for each one when all you're changing is the input value: http://jsfiddle.net/MaXef/ — harryg, Aug 19 '13 at 16:04
You can easily replicate it in pure javascript. I was demonstrating the concept — harryg, Aug 19 '13 at 16:17

cocco · Accepted Answer · 2013-08-19T16:43:12.570

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

score 1 · Answer 2 · answered Aug 19 '13 at 15:58

1

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();

answered Aug 19 '13 at 15:58

Brian

7,394
3
25
46

and when I click button A the focus is lost from input... how to avoid this? – AMD Aug 19 '13 at 16:07
The solution `document.getElementById('input').focus();` already gives your input back the focus. Double-check if you have pasted that line correctly. – Brian Aug 19 '13 at 16:13
I know that... I asked something else. When I write something in middle the input will fire and it will start writing from the end – AMD Aug 19 '13 at 16:16

score 0 · Answer 3 · answered Aug 19 '13 at 16:24

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>

Input with html keyboard

3 Answers3