如何使用js将光标聚焦在textarea中的特定点？答案

【问题标题】：How to focus cursor in specific point in textarea using js?如何使用js将光标聚焦在textarea中的特定点？
【发布时间】：2018-09-21 04:39:20
【问题描述】：

我正在尝试在 textarea 中创建“快速链接”选项，用户可以使用该选项通过直接单击它们来插入 html 标签。它工作正常，但是在我单击任何快速链接按钮后，光标会移动到文本区域中存在的文本的末尾。

如何在插入的标签之后保持/聚焦光标？

function quicklink(link){
  var cursorPos= $("#txtarea").prop('selectionStart');
  var v= $("#txtarea").val();
  var textBefore= v.substring(0, cursorPos);
  var textAfter= v.substring(cursorPos,v.length);
  $("#txtarea").val(textBefore + link + textAfter);
  $("#txtarea").focus();
}

<!--index.php -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

    <!DOCTYPE html>
      <html>
      <head>
      <title>QuickLink</title>
      <meta charset="UTF-8"/>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <script src="jquery.min.js"></script><script src="quicklink.js"></script> 
      <script>
        $(document).ready(function() {
          $("#txtarea").keyup(function(){
            var txt = $("#txtarea").val(); 
            var len = txt.length;
            $("#count").html("Word Count: " + len );
          });
        });
      </script>
     </head>
     <body>
       <div class="text_top">
         <input type="submit" onClick="quicklink('<div>')" value="<div>" >
         <input type="submit"  onClick="quicklink('</div>')" value="</div>">
         <input type="submit"  onClick="quicklink('<span>')"  value="<span>" >
         <input type="submit"  onClick="quicklink('</span>')"  value="</span>" >
         <input type="submit"  onClick="quicklink('<B>')"  value="<B>" >
         <input type="submit" onClick="quicklink('<I>')"   value="<I>" >
         <input type="submit"  onClick="quicklink('<U>')"  value="<U>" >
         <input type="submit"  onClick="quicklink('<ul>')"   value="<ul>" >
         <input type="submit"  onClick="quicklink('<li>')"   value="<li>" >
         <input type="submit"  onClick="quicklink('<sup>')"   value="<sup>" >
         <input type="submit"  onClick="quicklink('<sub>')"   value="<sub>" >
         <input type="submit"  onClick="quicklink('<strike>')"   value="<strike>">
       </div>
       <textarea id="txtarea" class="textarea"></textarea><div id="test">
    </div>
    <div id="count" class="text_down">Word Count: 0</div>
  </body>
</html>

【问题讨论】：

非常抱歉。我尽力格式化代码但失败了。下次我会改进的。
你的意思是当你点击<div>时，它会返回<div>[cursor]？
是的，就像你说的那样，当点击
时，我想要
[cursor] 但现在没有发生。

标签： javascript jquery html

【解决方案1】：

function quicklink(link){
  var cursorPos= $("#txtarea").prop('selectionStart');
  var v= $("#txtarea").val();
  var textBefore= v.substring(0, cursorPos);
  var textAfter= v.substring(cursorPos,v.length);
  $("#txtarea").val(textBefore + link + textAfter);
  $("#txtarea").focus();
}
// Getting closest number for array
// https://stackoverflow.com/questions/8584902/get-closest-number-out-of-array
function closest (num, arr) {
                var curr = arr[0];
                var diff = Math.abs (num - curr);
                for (var val = 0; val < arr.length; val++) {
                    var newdiff = Math.abs (num - arr[val]);
                    if (newdiff < diff) {
                        diff = newdiff;
                        curr = arr[val];
                    }
                }
                return curr;
            }
$('#txtarea').click(function(){
 var str = $(this).val();
 var regex = /\<([a-zA-Z\/]+\>)/gi, result, indices = [];
 // Getting positions as array
 // https://stackoverflow.com/questions/3410464/how-to-find-indices-of-all-occurrences-of-one-string-in-another-in-javascript
  while ( (result = regex.exec(str)) ) {
      indices.push(result.index);
  }
  var cursorPosition = $(this).prop("selectionStart");
  $(this).prop('selectionEnd');
  
  var closestPosition = closest(cursorPosition,indices)
  
  
  $(this).prop('selectionEnd', closestPosition);
})

<!--index.php -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

    <!DOCTYPE html>
      <html>
      <head>
      <title>QuickLink</title>
      <meta charset="UTF-8"/>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <script src="jquery.min.js"></script><script src="quicklink.js"></script> 
      <script>
        $(document).ready(function() {
          $("#txtarea").keyup(function(){
            var txt = $("#txtarea").val(); 
            var len = txt.length;
            $("#count").html("Word Count: " + len );
          });
        });
      </script>
     </head>
     <body>
       <div class="text_top">
         <input type="submit" onClick="quicklink('<div>')" value="<div>" >
         <input type="submit"  onClick="quicklink('</div>')" value="</div>">
         <input type="submit"  onClick="quicklink('<span>')"  value="<span>" >
         <input type="submit"  onClick="quicklink('</span>')"  value="</span>" >
         <input type="submit"  onClick="quicklink('<B>')"  value="<B>" >
         <input type="submit" onClick="quicklink('<I>')"   value="<I>" >
         <input type="submit"  onClick="quicklink('<U>')"  value="<U>" >
         <input type="submit"  onClick="quicklink('<ul>')"   value="<ul>" >
         <input type="submit"  onClick="quicklink('<li>')"   value="<li>" >
         <input type="submit"  onClick="quicklink('<sup>')"   value="<sup>" >
         <input type="submit"  onClick="quicklink('<sub>')"   value="<sub>" >
         <input type="submit"  onClick="quicklink('<strike>')"   value="<strike>">
       </div>
       <textarea id="txtarea" class="textarea"></textarea><div id="test">
    </div>
    <div id="count" class="text_down">Word Count: 0</div>
  </body>
</html>

【讨论】：

谢谢，但我从stackoverflow.com/a/1909997/7676742找到了一个更简单的选择

【解决方案2】：

您可以使用以下解决方案获取当前光标位置：

https://stackoverflow.com/a/1909997/7676742

并将其增加新添加的 html 标记的长度（例如 3 表示 <a>）并使用以下解决方案设置光标位置：

https://stackoverflow.com/a/49750025/7676742

【讨论】：

【解决方案3】：

我找到了一种简单的方法：

function quicklink(link){
  var linklen=link.length;
  var cursorPos= $("#txtarea").prop('selectionStart');
  var v= $("#txtarea").val();
  var textBefore= v.substring(0, cursorPos);
  var textAfter= v.substring(cursorPos,v.length);
  $("#txtarea").val(textBefore + link + textAfter);
  $("#txtarea").prop('selectionEnd', cursorPos+linklen);
  $("#textarea").focus();         
}

【讨论】：