利用元素contenteditable属性的true与false，实现网页@人的功能。元素设置为【contenteditable="true"】将div设置成可编辑的输入框，元素设置为【contenteditable="false"】将不可编辑且删除是整个元素内容。
注意：div【contenteditable="true"】输入框是支持带css样式文本粘贴的，纯聊天的功能可能要用正则清空css样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.UEditor{
padding: 8px;
border: 1px solid #000;
outline: none;
}
.UEditor:empty::before{
content: '请输入内容';
color: #dddddd;
}
.people{
color: #40a9ff;
}
</style>
</head>
<body>
<div class="UEditor" contenteditable="true">
<p>我们今晚去哪里玩？<span class="people" contenteditable="false">@所有人</span></p>
<p>我们今晚去哪里玩？<span class="people" contenteditable="false">@陈小明</span>晚上8点集合</p>
</div>
</body>
</html>
image.png
=============================================================
js将粘贴复制的纯文本（去掉样式标签）
document.querySelector('.UEditor').addEventListener('paste', function (event) {
event.preventDefault();
var text;
var clp = (event.originalEvent || event).clipboardData;
// 兼容针对于opera ie等浏览器
if (clp === undefined || clp === null) {
text = window.clipboardData.getData("text") || "";
if (text !== "") {
if (window.getSelection) {
// 针对于ie11 10 9 safari
var newNode = document.createElement("span");
newNode.innerHTML = text;
window.getSelection().getRangeAt(0).insertNode(newNode);
} else {
// 兼容ie10 9 8 7 6 5
document.selection.createRange().pasteHTML(text);
}
}
} else {
// 兼容chorme或hotfire
text = clp.getData('text/plain') || "";
if (text !== "") {
document.execCommand('insertText', false, text);
}
}
});
其它参考链接：
js在可编辑div中定位和设置光标 - 简书 (jianshu.com)
javascript获取input/textarea以及设置光标位置 - 简书 (jianshu.com)
