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
3 answers
solution1
1 2013-08-19 15:58:54
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();
solution2
1 ACCPTED 2013-08-19 16:30:28
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
solution3
0 2013-08-19 16:24:11
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.