user-modify属性。
user-modify属性,用来控制用户能否对页面文本进行编辑。与标签的contentEditable属性类似。·
-webkit-user-modify: read-only | read-write | read-write-plaintext-only
read-only | 内容只读。 |
---|---|
read-write | 内容可读写。(支持富文本) |
read-write-plaintext-only | 内容可读写,但粘贴内容中的富文本格式(如文本的颜色、大小,图片等)会丢失。内容类似于以纯文本显示。 |
CSS代码:
1 .test { 2 height: 100px; 3 padding: 5px; 4 border: 1px solid #a0b3d6; 5 overflow: auto; 6 } 7 .test:focus { 8 box-shadow: 0 0 5px blue; 9 } 10 .read-only { 11 -webkit-user-modify: read-only; 12 } 13 .read-write { 14 -webkit-user-modify: read-write;; 15 } 16 .write-only { 17 /* 几乎没有浏览器支持 */ 18 user-modify: write-only; 19 } 20 .read-write-plaintext-only { 21 -webkit-user-modify: read-write-plaintext-only; 22 }
HTML代码:
1 <strong>read-only</strong> 2 <p class="test read-only"></p> 3 <strong>write-only</strong> 4 <p class="test write-only"></p> 5 <strong>read-write</strong> 6 <p class="test read-write"></p> 7 <strong>read-write-plaintext-only</strong> 8 <p class="test read-write-plaintext-only"></p>