使用HTML contenteditable属性,实现仿微信@功能的输入框

追格官方小助手/ 2022年04月27日/ CSS教程/ 浏览 2534

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 属性。

发表评论

暂无评论,抢个沙发...

客服 工单