看到张鑫旭的一篇文章:小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越多越有趣的东西,如果你发现更多有用的东西,也欢迎您来这里分享。