输入框光标处添加指定内容

作者: 清霆 | 来源:发表于2023-04-26 16:46 被阅读0次

Swift 输入框光标
用css实现可编辑div输入框的placeholder效果
如何在input、textarea中光标处插入指定内容
input光标处增加内容
Java实现简易的文本编辑器
模态框关闭时使onblur事件失效
uniapp 解决input / textarea 输入时软键盘
vue.js表单输入在光标处上屏显示关键词
java.lang.NoSuchMethodError: No
Flutter 设置输入框光标位置为末尾

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>输入框光标处添加指定内容</title>
    <script>
      function handleClick() {
        // 指定输入框
        const editor = document.querySelector('#editor');
        // 设置要插入的内容
        const textNode = document.createTextNode('hello word');
        const selection = getSelection();
        let range;
        // 判断是否有range以及range是否为指定元素
        if (
          selection.rangeCount <= 0 ||
          ((range = selection.getRangeAt(0)) &&
            range.commonAncestorContainer !== editor &&
            range.commonAncestorContainer.parentElement !== editor)
        ) {
          // 如果没有
          range = document.createRange();
          // 设置rang位置
          range.selectNodeContents(editor);
          // 设置rang到边界点之一 false 节点末 true 节点始
          range.collapse(false);
          // 将rang 添加到selection
          selection.addRange(range);
        } else {
          // 如果有
          range = selection.getRangeAt(0);
          // 先删除文本再添加
          range.deleteContents();
        }
        // 插入文本
        range.insertNode(textNode);
        // 将光标位置移到新添加文本后面
        selection.collapseToEnd();
      }
    </script>
  </head>
  <body>
    <div contenteditable id="editor">are you ok</div>
    <button onclick="handleClick()">点击</button>
  </body>
</html>