user-modify和contenteditable新属性

看到张鑫旭的一篇文章:小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;
}

适用于高级浏览器中和移动端。

演示:

复制这里文字和图片,蔡宝坚blog然后粘贴到下面区域。

  • 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越多越有趣的东西,如果你发现更多有用的东西,也欢迎您来这里分享。

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原创文章:user-modify和contenteditable新属性 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/user-modify-contenteditable.html)

发表评论

请登录后发表评论: