contenteditable(contenteditable属性)
本篇文章给大家谈谈contenteditable，以及contenteditable属性对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。
contenteditable 属性设为plaintext-only后,如何添加换行
就说两个CSS3的
user-modify
css版的contenteditable
使用方法：
user-modify: read-only;
user-modify: read-write;
user-modify: write-only;
user-modify: read-write-plaintext-only;
其中read-only为默认值，write-only是来搞笑的，read-write和contenteditable="true"效果一致，read-write-plaintext-only和contenteditable="plaintext-only"效果一致（没错这属性还有这个值但是还是草案中）。
至于兼容性么，就跟这玩意儿为人所知的程度一样，贫乏得可怜，目前IE浏览器不明，FF只支持前三个属性，Chrome高版本可以全部支持，但是全都要加上私有前缀。
适用场景的话，大概就是contenteditable的css版，想要做高度自适应的文本编辑框，又不想在粘贴复制的时候把html给复制进去。生产环境还是老老实实用js来搞吧。
如何让contenteditable元素只能输入纯文本 00 张鑫旭
一、温故而知新
很多年以前，稍等，让我搜一下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值的两个<p>标签元素是可以被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了，直接下面的框框，大家可以试试，看看能不能搞富文本。
<div contenteditable="plaintext-only"></div>
如果您发现，居然出乎意料，可以弄进去富文本，那说明你使用的是非Chrome之流的浏览器。
换句话说，contenteditable="plaintext-only"和CSS只的-webkit-user-modify: read-write-plaintext-only一样，目前仅仅是Chrome浏览器支持比较好的。
所以，您的项目如果还有很多IE8浏览器的用户，我只能替你惋惜，美妙的东西无法立即用上，不得已，寻求下面的方法。
四、控制粘贴paste事件的JS控制法
如果我们单纯地敲击键盘，输入的内容实际上都是纯文本。除了一些特殊情况，例如IE浏览器下的编辑框会自动把合乎条件的url地址自动加上链接。富
文本污染的情况主要出现在复制粘贴的时候，于是，如果我们能在粘贴的时候，对剪切板中的内容进行HTML过滤，再手动插入内容，岂不就可以完美解决无法输
入富文本的问题了吗
如何实现contenteditable可输入元素的onchange事件
contenteditable属性是 HTML5中的新属性，设置属性值为true时可实现将div、p等元素转化为类似input的可输入元素。但是此元素在输入中文时无法正常使用onchange事件实现常规需求，如下提供可替换方案：
假设需求：可编辑输入框中输入值改变即向后台请求，发送数据。
如果是input、textarea元素，此场景可以用onchange事件轻松完成，然而可编辑的div元素利用此onchange或者oninput事件时会出现不符场景的非常规情况（输入中文时，中文未生成，仍在敲击键盘时会触发输入值改变，获取当前敲击的英文字母而发送请求）
eg: https://s31.aconvert.com/convert/p3r68-cdx67/jcx2z-lbens.gif
contenteditable属性
contenteditable通俗来讲就是一个编辑器。
contenteditable属性是 HTML5中的新属性。规定是否可编辑元素的内容。
属性值
true规定可以编辑元素内容。
false规定无法编辑元素内容。
例：
很多人刚开始接触contenteditable这个属性时都会想到textarea。
textarea支持多行文本输入，满足了我们编辑的很大需求。然而，textarea不能像div一样高度自适应，高度保持不变，内容大于高度时就会出现滚动条。而且textarea只支持文本输入，随着现在越来越关注用户体验，需求也越来越多，很多时候我们需要在编辑区域插入图片，链接，视频。
现在我们有一个很简单的实现办法，就是让一个div标签（高度自适应block元素）模拟编辑器。即在div里加入contenteditable="true"属性；
例：
在设置了contenteditable属性的元素中插入图片，链接，商品等；
此处还涉及到一个window.getSelection知识点，在接下来的文章会详细介绍。
让contenteditable元素只能输入纯文本
（1）css控制法
一个div元素，要让其可编辑，contenteditable属性是最常用方法，CSS中也有属性可以让普通元素可读写。
user-modify.
支持属性值如下：
read-write和read-write-plaintext-only会让元素表现得像个文本域一样，可以focus以及输入内容
（2）contenteditable控制法
"plaintext-only"可以让编辑区域只能键入纯文本
*注意：目前仅仅是Chrome浏览器支持比较好的
后续会继续更新。
欢迎反馈，感谢阅读！
感谢您的阅读！希望本文对解决您关于contenteditable的问题有所帮助。如果您还有其他疑问，欢迎随时向我们提问。