我正在尝试创建一个填充输入的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 here
答案 0 :(得分: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();
答案 1 :(得分:1)
完整示例(缺少一些数字等..) 可以指出你想要的地方......它会留在那里。
动态创建键盘,只有一个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:我在Chrome中测试过。
修改
唯一不起作用的是,如果你选择一个文字并在删除之前写,它会从选择开始的地方开始,并留下你选择的其他字母。
编辑2您期望的一切
答案 2 :(得分:0)
我更新了你的JSfiddle以获得一个有效的例子。 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>