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 属性。
-
base64图片在微信开发者工具中显示,在手机上不行base64图片在微信开发者工具中显示,在手机上不行
-
微信小程序黑名单功能微信小程序黑名单功能
-
微信小程序隐私协议弹框不弹微信小程序隐私协议弹框不弹
-
担心WordPress REST API暴露用户名?这里有一个简单的屏蔽方法!在深入探讨WordPress REST API的利用与功能时,追格小编虽已分享了多篇相关内容,但我们依然理解,部分用户可能仍对网站用户名暴露的问题心存顾虑,尤其是当他们并不需要使用到如古腾堡编辑器或小程序等特定功能时。针对这一关切,今天小编特地为大家介绍一种有效的屏蔽方法。
-
微信小程序打开任意公众号文章 wx.openOfficialAccountArticlewx.openOfficialAccountArticle是微信小程序通过小程序打开任意公众号文章api,不包括临时链接等异常状态下的公众号文章,必须有点击行为才能调用成功。
-
追格小程序V2.5.0更新发布追格小程序V2.5.0版本的更新,我们没给大家添太多新花样,主要是把“内功”练好了。我们认真检查了上一版里那些组件之间的小摩擦,一点点地调整、优化,搞定了超过40多个小地方。这样一来,小程序跑起来就更顺畅了,大家用起来也会感觉更舒服、更顺手。这次虽然没大张旗鼓,但确实是让产品站得更稳、更可靠了。
暂无评论,抢个沙发...