如何更改文本区域中的光标位置？

Question

我正在开发一个实时 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="&#8592;">
     <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=".." />|

那么我该怎么做才能解决这个问题呢？

Answer 1

如果您想将光标放在文本区域内容的末尾前 5 个字符

var myTextArea = document.getElementById("text");
var end = myTextArea.selectionEnd;
myTextArea.focus();
myTextArea.selectionEnd = end + 5;