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

主要是使用 Selection 和 Range 的 api来实现根据光标位置来添加指定文本。

contenteditable

contenteditable 属性指定元素内容是否可编辑。

值	描述
true	指定元素是可编辑的
false	指定元素是不可编辑的

<style>
  .w-input {
    width: 400px;
    height: 200px;
    border: 1px solid red;
    margin: 20px;
  }
</style
<div contenteditable="true" class="w-input"></div>

光标位置添加字符

<div contenteditable="true" class="w-input" id="input">are you ok</div>
<button onclick="handleClick()">点击</button>
<script>
    function handleClick() {
        let selection = getSelection();
​
        let rang = selection.getRangeAt(0);
        // 创建要插入的文本节点
        let textNode = document.createTextNode("添加的节点");
        // 插入新文本
        rang.insertNode(textNode);
        // 用于将光标位置移到新文本后面
        selection.collapseToEnd();
​
    }
</script>

没有光标时输入字符框添加、先删除文本再添加

<div contenteditable="true" class="w-input" id="input">
    123456789<img src="../images/微笑.png" alt="" />
</div>
​
<button onclick="handleClick()">点击</button>
<script>
function handleClick() {
    let selection = getSelection();
    let textNode = document.createTextNode("hello word");
    let range;
    // 判断是否有rang
    if (selection.rangeCount <= 0) {
        // 如果没有
        range = document.createRange();
        // 获取输入框
        let input = document.querySelector("#input");
        // 设置rang位置
        range.selectNodeContents(input);
        // 设置rang到边界点之一 false 节点末 true 节点始
        range.collapse(false);
        // 将rang 添加到selection
        selection.addRange(range);
    } else {
        // 如果有
        range = selection.getRangeAt(0);
         // 先删除文本再添加
        range.deleteContents();
    }
    // 插入文本
    range.insertNode(textNode);
    // 将光标位置移到新添加文本后面
    selection.collapseToEnd();
}
</script>

\