JavaScript 如何在文本框的当前光标位置插入文本

要在文本框/输入框的当前光标位置插入文本，我们需要获取当前光标的位置。下面是获取当前光标位置的方法：

首先，使用textarea/inputbox的selectionStart属性获取当前光标位置。
为了在给定位置插入文本，我们将使用slice函数将字符串拆分为两部分，然后在文本的开头和结尾将两部分文本与要插入的文本(text_to_insert)连接起来。

语法：

//将返回当前光标位置
document.getElementById("id").selectionStart; 

//获取文本区域的值
let x= ('#text1').val();

//获取输入框的值
let text_to_insert=('#insert').val();

//将更新后的值设置到文本区域
$('#text1').val(x.slice(0,curPos)+text_to_insert+x.slice(curPos));

示例： 在此示例中，我们将在文本框的当前光标位置插入文本。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport"
              content="width=device-width, 
                       initial-scale=1.0" />
        <script src=
"https://code.jquery.com/jquery-3.5.1.min.js" 
                integrity=
"sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" 
                crossorigin="anonymous">
      </script>
        <title>Document</title>
    </head>
    <body>
        <textarea rows="4" 
                  id="text1" 
                  cols="50">
      </textarea>
        <input type="text" 
               id="insert" />
        <button onclick="setTextToCurrentPos()">
          Insert at current position
      </button>
        <script>
            function setTextToCurrentPos() {
                var curPos = 
                    document.getElementById("text1").selectionStart;
                console.log(curPos);
                let x = ("#text1").val();
                let text_to_insert =("#insert").val();
                $("#text1").val(
x.slice(0, curPos) + text_to_insert + x.slice(curPos));
            }
        </script>
    </body>
</html>

输出：

JavaScript 如何在文本框的当前光标位置插入文本

在文本框的当前光标位置插入文本

解释： 这里有一个名为setTextToCurrentPos的方法。点击”在当前位置插入”按钮时会调用这个方法。

//document.getElementById('text1').selectionStart;

这行代码给出了光标的当前位置/起始位置。例如： 我是一个开发者

如果我们的光标放在”开发者”前面，它将返回7。因此，如代码所示，我们可以使用slice方法在当前光标位置插入文本。

let x= ('#text1').val(); //获取文本区域的值
let text_to_insert=('#insert').val(); //获取输入框的值

$('#text1').val(x.slice(0, curPos)+text_to_insert+x.slice(curPos));
//将更新后的值设置到文本区域