设置文本光标到最后位置

2023-06-14

字数： 1.1k字 | 阅读时长： 5min | 阅读量：次

参考链接：获取光标位置
说明：本人只测试了谷歌浏览器

input / textarea 光标设置

<!DOCTYPE html>
<html>
  <head>
    <title>无标题页</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <script>
      function insertAtCursor(myField, myValue) {
        // var myField = document.getElementById('textarea');
        // var myValue = document.getElementById('text').value;
        var myField = $("#textarea");
        var myValue = $("#text").val();
        var startPos = $("#textarea").get(0).selectionStart; // 选区开始位置
        var endPos = $("#textarea").get(0).selectionEnd; // 选区结束位置
        //IE 浏览器
        if (document.selection) {
          console.log(myField.value, myValue);
          // 这个在我的电脑上报错
          myField.focus();
          sel = document.selection.createRange();
          sel.text = myValue;
          sel.select();
        }
        //FireFox、Chrome等
        else if (startPos || startPos == "0") {
          var myFieldEl = myField.get(0);
          console.log("startPos : " + startPos);
          console.log("endPos : " + endPos);
          // 保存滚动条
          var restoreTop = myFieldEl.scrollTop;
          myFieldEl.value =
            myFieldEl.value.substring(0, startPos) +
            myValue +
            myFieldEl.value.substring(endPos, myFieldEl.value.length);
          if (restoreTop > 0) {
            myFieldEl.scrollTop = restoreTop;
          }
          myField.focus();
          myFieldEl.selectionStart = startPos + myValue.length;
          myFieldEl.selectionEnd = startPos + myValue.length;
        } else {
          console.log(myField.val(), myValue);
          myField.val(myField.val() + myValue);
          myField.focus();
        }
      }
    </script>
  </head>
  <body>
    <textarea id="textarea" style="width: 386px; height: 260px"> </textarea>
    <input type="text" id="text" />
    <input type="button" value="插入" onclick="insertAtCursor()" />
  </body>
</html>

要点：
- 用jQueryElement.focus() 方法完成光标设置到最后
- 用selectionStart|selectionEnd 原生 dom 属性来获取选取开始位置和结束位置

div contenteditable=”true” 光标设置

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      #edit {
        height: 500px;
        width: 500px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div id="edit" contenteditable></div>
    <input type="text" id="emojiInput" /> <button id="sendEmoji">send</button>
    <script>
      //var sendEmoji = document.getElementById('sendEmoji')
      // 定义最后光标对象
      var lastEditRange;
      // 编辑框点击事件
      document.getElementById("edit").onclick = function () {
        console.log("------------onclick------------");
        // 获取选定对象
        var selection = getSelection();
        // 设置最后光标对象
        lastEditRange = selection.getRangeAt(0);
      };
      // 编辑框按键弹起事件
      document.getElementById("edit").onkeyup = function () {
        console.log("------------onkeyup------------");
        // 获取选定对象
        var selection = getSelection();
        // 设置最后光标对象
        lastEditRange = selection.getRangeAt(0);
      };
      // 表情点击事件
      document.getElementById("sendEmoji").onclick = function () {
        console.log("------------sendEmoji:onclick------------");
        // 获取编辑框对象
        var edit = document.getElementById("edit");
        // 获取输入框对象
        var emojiInput = document.getElementById("emojiInput");
        // 编辑框设置焦点
        edit.focus();
        // 获取选定对象
        var selection = getSelection();
        // 判断是否有最后光标对象存在
        if (lastEditRange) {
          // 存在最后光标对象，选定对象清除所有光标并添加最后光标还原之前的状态
          selection.removeAllRanges();
          selection.addRange(lastEditRange);
        }
        // 判断选定对象范围是编辑框还是文本节点
        console.log(
          "--selection.anchorNode.nodeName--" + selection.anchorNode.nodeName
        );
        if (selection.anchorNode.nodeName != "#text") {
          // 如果是编辑框范围。则创建表情文本节点进行插入
          var emojiText = document.createTextNode(emojiInput.value);
          console.log(
            "-----------selection.anchorOffse------------" +
              selection.anchorOffset
          );
          if (edit.childNodes.length > 0) {
            // 如果文本框的子元素大于0，则表示有其他元素，则按照位置插入表情节点
            for (var i = 0; i < edit.childNodes.length; i++) {
              if (i == selection.anchorOffset) {
                edit.insertBefore(emojiText, edit.childNodes[i]);
              }
            }
          } else {
            // 否则直接插入一个表情元素
            edit.appendChild(emojiText);
          }
          // 创建新的光标对象
          var range = document.createRange();
          // 光标对象的范围界定为新建的表情节点
          range.selectNodeContents(emojiText);
          // 光标位置定位在表情节点的最大长度
          range.setStart(emojiText, emojiText.length);
          // 使光标开始和光标结束重叠
          range.collapse(true);
          // 清除选定对象的所有光标对象
          selection.removeAllRanges();
          // 插入新的光标对象
          selection.addRange(range);
        } else {
          console.log("-----------else------------" + selection.getRangeAt(0));
          // 如果是文本节点则先获取光标对象
          var range = selection.getRangeAt(0);
          // 获取光标对象的范围界定对象，一般就是textNode对象
          var textNode = range.startContainer;
          // 获取光标位置
          var rangeStartOffset = range.startOffset;
          console.log(
            "-----------else:rangeStartOffset------------" + rangeStartOffset
          );
          // 文本节点在光标位置处插入新的表情内容
          textNode.insertData(rangeStartOffset, emojiInput.value);
          // 光标移动到到原来的位置加上新内容的长度
          range.setStart(textNode, rangeStartOffset + emojiInput.value.length);
          // 光标开始和光标结束重叠
          range.collapse(true);
          // 清除选定对象的所有光标对象
          selection.removeAllRanges();
          // 插入新的光标对象
          selection.addRange(range);
        }
        // 无论如何都要记录最后光标对象
        lastEditRange = selection.getRangeAt(0);
      };
    </script>
  </body>
</html>

要点： - 主要就是使用了 selection.removeAllRanges();selection.addRange(range); 方法完成光标设置到最新位置