看到张鑫旭的一篇文章:小tip: 如何让contenteditable元素只能输入纯文本,说到了几个我不曾了解的内容,user-modify和contenteditable的新属性。
user-modify属性,用来控制用户能否对页面文本进行编辑。与标签的contentEditable属性类似。
-webkit-user-modify: read-only | read-write | read-write-plaintext-only
| read-only | 内容只读。 |
|---|---|
| read-write | 内容可读写。 |
| read-write-plaintext-only | 内容可读写,但粘贴内容中的富文本格式(如文本的颜色、大小,图片等)会丢失。内容类似于以纯文本显示。 |
/*只能读*/
.read-only {
-webkit-user-modify:read-only;
-moz-user-modify:read-only;
user-modify:read-only;
}
/*可读可写*/
.read-write {
-webkit-user-modify: read-write;
-moz-user-modify: read-write;
user-modify: read-write;
}
/*只可写*/
.write-only {
-webkit-user-modify: write-only;
-moz-user-modify: write-only;
user-modify: write-only;
}
适用于高级浏览器中和移动端。
演示:
复制这里文字和图片,
然后粘贴到下面区域。
- read-only
- read-write
- read-write-plaintext-only
- 这里使用的是contentEditable属性
文章还提到的contenteditable的新东西。
contenteditable="" contenteditable="events" contenteditable="caret" contenteditable="plaintext-only" contenteditable="true" contenteditable="false"
试试下面这个:contenteditable=”plaintext-only”
CSS3越多越有趣的东西,如果你发现更多有用的东西,也欢迎您来这里分享。
