[英]How to change the cursor position in a text-area?
I'm working on a live HTML editor.我正在开发一个实时 HTML 编辑器。 It's basically for mobile users.它基本上适用于移动用户。 So I've made a virtual keyboard which has the HTML tags.所以我制作了一个带有 HTML 标签的虚拟键盘。 But I'm facing a problem & that is :: The keyboard only prints the tags at the end of another tag.但我面临一个问题,那就是 :: 键盘只在另一个标签的末尾打印标签。 So it isn't working as I want.所以它不能像我想要的那样工作。
Here is a demo code.这是一个演示代码。
<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>
With this code I can only print after the last printed character.使用此代码,我只能在最后一个打印字符之后打印。 But I want like that [Here '|'但我想要那样 [这里 '|' means the cursor],表示光标],
<div><p id=".."><img src=".." />|<p/></div>
But it prints like this但它打印成这样
<div><div><p><p><img src=".." />|
So what can I do to solve the problem?那么我能做些什么来解决这个问题呢?
if you want to put cursor 5 characters before the end of your text area content如果您想将光标放在文本区域内容末尾之前 5 个字符
var myTextArea = document.getElementById("text");
var end = myTextArea.selectionEnd;
myTextArea.focus();
myTextArea.selectionEnd = end + 5;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.