一、温故而知新
很多年以前，稍等，让我 搜一下contenteditable （右上角），哈，是2010年的时候，写了篇文章“ div模拟textarea文本域轻松实现高度自适应 ”，就是说的 contenteditable 的应用。
虽然说，利用全浏览器都支持的 contenteditable 模拟文本域可以实现体验相当不错的高度跟随内容自动撑开的效果，但是呢，有个很大的问题就是HTML内容可以直接被粘贴进去，如下图所示：
之前的文章提到过过滤HTML的方法，保证内容都是纯文本。然而，这种方法的问题在于：
粘贴完毕到过滤结束有时间差，用户很看到内容一闪而过的糟糕体验； 光标的位置会发生变化，不是之前focus的位置了；当年的我图样图森破，所以，只有上面这种程度。实际上，控制 contenteditable 元素只能输入纯文本是有体验比较好的方法的。
二、与contenteditable属性无关的CSS控制法
一个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 以及输入内容。
您可以狠狠地点击这里： CSS user-modify属性行为表现demo
会发现，设置了 read-write 和 read-write-plaintext-only 值的两个
标签元素是可以被focus的：
而这两者的区别就在于，一个可以输入富文本，而下面一个只能输入纯文本，例如，我们从某网页同时复制一段内容粘贴进去看看：
好了，至此，本文标题的答案实际上就已经有了。也就是给元素设置：
user-modify: read-write-plaintext-only
就可以让元素既可以编辑，也只能输入纯文本，表现得就跟 textarea 文本域一样。
是不是很酷啊！然而，抱歉地跟大家讲下，目前只有webkit内核浏览器才支持 read-write-plaintext-only 这个值，因此，我们的使用其实是：
-webkit-user-modify: read-write-plaintext-only
我们可以在移动端使用，以及，只需要兼顾webkit内容的桌面网页项目。
三、使用标准contenteditable属性值的HTML控制法
咳咳，提问：在HTML中， contenteditable 支持的属性值是？
图样图森破时候的我，脑中就只有 contenteditable="true" 和 contenteditable="false" ，科科，后来我发现自己太天真了， 新的草案 中明确表示还有多个其他属性值：
The contenteditable attribute is an enumerated attribute whose keywords are the empty string (“”), “events”, “caret”, “typing”, “plaintext-only”, “true”, and “false”. There is one additional state, the inherit state, which is the missing value default (and the invalid value default).
垂直展示下就是（不包括默认的inherit继承）：
contenteditable=""contenteditable="events"contenteditable="caret"contenteditable="plaintext-only"contenteditable="true"contenteditable="false"
别问我，我也不知道 "events" 和 "caret" 是干什么用的，嘿，但是 "plaintext-only" 我是知道的，可以让编辑区域只能键入纯文本。这里就不需要demo了，直接下面的框框，大家可以试试，看看能不能搞富文本。
查看更多关于小tip:如何让contenteditable元素只能输入纯文本_html/css_WEB-ITno的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did113941