1.
与contenteditable属性无关的CSS控制法
只有webkit内核浏览器才支持
read-write-plaintext-only
一个div元素,要让其可编辑,也就是可读写,contenteditable
属性是最常用方法,做前端的基本上都知道。但是,知道CSS中有属性可以让普通元素可读写的的同学怕是就少多了。
主角亮相:user-modify.
支持属性值如下:
user-modify: read-only;
user-modify: read-write;
user-modify: write-only;
user-modify: read-write-plaintext-only;
write-only
不用在意,当下这个年代,基本上没有浏览器支持,以后估计也不会有。
read-only
表示只读,就是普通元素的默认状态啦。
然后,
read-write
和read-write-plaintext-only
会让元素表现得像个文本域一样,可以focus
以及输入内容
两者的区别就在于,一个可以输入富文本,而下面一个只能输入纯文本
read-write-plaintext-only
{
height: 100px;
padding: 5px;
border: 1px solid #a0b3d6;
overflow: auto;}
<p class="test read-write-plaintext-only"></p>
2. 使用标准contenteditable属性值的HTML控制法
目前仅仅是Chrome浏览器支持比较好的。
contenteditable=""
contenteditable="events"
contenteditable="caret"
contenteditable="plaintext-only"
contenteditable="true"
contenteditable="false"