<!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>
参考文档 输入框光标处添加指定内容 - 掘金 (juejin.cn)
网友评论