div可编辑内容@群成员功能
2020-08-04 本文已影响0人
在小白的路上越走越远
模拟demo：点击群成员时，div的编辑框中添加进群成员。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="button" value="插入字符" class="input" />
<button>
<span>姓名</span>
<span>机构</span>
</button>
<ul>
<li>123</li>
</ul>
<span class="group">群成员</span>
<div class="divbtn">div按钮</div>
<div
contenteditable="true"
style="height: 50px; border: 2px solid red;"
id="test"
></div>
<script>
/*
正常：点击按钮后在光标后显示内容
不正常：生成在第一个
*/
document.querySelector("button").addEventListener("click", addMember); //类型按钮 正常
document.querySelector(".input").addEventListener("click", addMember); //类型按钮 正常
document.querySelector("ul").addEventListener("click", addMember); // 类型非按钮 Google不正常
document.querySelector(".group").addEventListener("click", addMember); // 类型非按钮 Google不正常
document.querySelector(".divbtn").addEventListener("click", addMember); // 类型非按钮 Google不正常
function addMember() {
document.getElementById("test").focus();
let sel = window.getSelection(); //被选中的编辑框
let range = sel.getRangeAt(0); // 光标
range.deleteContents(); // 清空选中的范围(光标不选中范围不影响)
// 设置元素
let content = document.createElement("span");
content.style.color = "blue";
content.style.marginLeft = "5px";
content.contentEditable = "false";
let txt = document.createTextNode("@群成员");
content.appendChild(txt);
let frag = document.createDocumentFragment(); //创建虚拟节点
let lastNode = frag.appendChild(content); //添加节点
range.insertNode(frag); //在光标后面插入内容[这里出现了不正常]
range.setStartAfter(lastNode); //光标在被插入内容的后面
}
</script>
</body>
</html>
不知道什么原因，导致非button元素下，无法将其内容插在光标后，后续处理把其他元素换成了button元素，并修改其样式。
