我正在使用实时HTML编辑器。它基本上是针对移动用户的。因此，我制作了一个带有HTML标签的虚拟键盘。但是我面临一个问题，那就是::键盘仅在另一个标签的末尾打印标签。因此它无法按我的要求运行。
这里是演示代码。
<body>
<div id="keyboard" class="show">
<div>
<input type="button" value="Q">
<input type="button" value="W">
.........
<input type="button" value="V">
<input type="button" value="B">
<input type="button" value="N">
<input type="button" value="M">
</div><div>
<input id="back" type="button" value="←">
<input id="space" type="button" value=" ">
<input id="clear" type="reset" value="clear">
</div><div>
<label>Track Search</label> - <input id="text" type="text">
</div>
<!-- #keyboard --></div>
<script>
(function() {
'use strict';
var i, c, t, delay = 5000, kb = document.getElementById('keyboard');
/* get all the input elements within the div whose id is "keyboard */
i = kb.getElementsByTagName('input');
/* loop through all the elements */
for(c = 0;c < i.length; c++) {
/* find all the the input type="button" elements */
if(i[c].type === 'button') {
/* add an onclick handler to each of them and set the function to call */
i[c].addEventListener('onclick',makeClickHandler(c));
}
}
/* this is the type="reset" input */
document.getElementById('clear').addEventListener('click',
function() {
/* remove all the characters from the input type="text" element */
document.getElementById('text').value = '';
},false);
function makeClickHandler(c) {
i[c].onclick=function() {
/* find the non-text button which has an id */
if(i[c].id === 'back') {
/* remove last character from the input the type="text" element using regular expression */
document.getElementById('text').value =
document.getElementById('text').value.replace(/.$/,'');
}
/* find the text buttons */
else {
/* add characters to the input type="text" element */
document.getElementById('text').value+= this.value.toLowerCase();
}
};
}
document.onmousemove = resetTimer;
document.onkeypress = resetTimer;
function logout() {
kb.classList.remove('show');
kb.classList.add('hide');
}
function resetTimer() {
clearTimeout(t);
t = setTimeout(logout, delay)
}
resetTimer();
})();
</script>
</body>
使用此代码，我只能在最后一个打印字符之后打印。但是我想要那样[这里'|'表示光标]，
<div><p id=".."><img src=".." />|<p/></div>
但是它像这样打印
<div><div><p><p><img src=".." />|
那么我该怎么做才能解决问题？
如果要在文本区域内容的末尾放置光标5个字符，则>]
var myTextArea = document.getElementById("text");
var end = myTextArea.selectionEnd;
myTextArea.focus();
myTextArea.selectionEnd = end + 5;