contenteditable 属性主要是用来指定元素内容是否可编辑，当元素中没有该属性时，元素将从父元素继承，不过现在的主流浏览器基本都支持该属性。
基于这个属性，可以很方便的实现类似微信输入框的那种@功能。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仿微信@功能</title>
<style>
.tag {
padding: 2px 4px;
background: #999999;
border-radius: 5px;
}
</style>
</head>
<body>
<p contenteditable="true">
<span contenteditable="false" class="tag">@张某某</span>
<span contenteditable="false" class="tag">@王某某</span>
这是段落信息，按需修改。
</p>
</body>
</html>正常的文本，可以正常编辑，tag则作为一个整体，可以被光标删除。
@张某某 王某某 这是段落信息，按需修改。
比较遗憾的是，各个平台的小程序，都尚不支持 contenteditable 属性。
暂无评论，抢个沙发...