div可编辑user-modify/contenteditable

 div通常是用于只读的，但有时候我们需要对div的内容进行编辑，很多人推荐使用user-modify这个属性，在google里用-webkit-read-modify，在firfox里用-moz-user-modify。但是看这类用法使用文章之前，一定要看看别人写文时间，有些东西经久不衰，但有的东西就……例如前面说的user-modify，google现在仍旧支持的很好，而firefox你去试试！反正我用的时候没有反应。

 这个地方（http://www.zhangxinxu.com/study/201601/user-modify.html）对user-modify的几个属性讲的非常清楚，但是请看清楚网址中的日期（我猜是日期哈），那个时候支持，不代表现在还支持，至少MDN（The
Mozilla Developer Network，Mozilla开发者网站）上是说了已经不支持，而且推荐使用另一个方法了。

 
                     


 上面是MDN上对user-modify使用的建议，大概意思就是说现在他不喜欢这个属性，所以开始抛弃它去迎娶别人了。那么，这个别人是哪个呢？就是同一页面下面推荐的contenteditable。
 contenteditable是HTML5的一个新的全局属性，它规定是否可编辑元素的内容。其实也不新了，这儿有一个全面的介绍，反正我看完再理解完是花了非常之长的之间，我是英语渣，就看你了。其实看看中文的是最亲切了，大多数人都喜欢这种短小精悍的中文介绍，我也不例外。以下贴MDN上的一段用法介绍

 
                     


 大概意思就是这是一个全局属性，值为true/false，true也可以表现为空的字符串。如果不设置这个属性，则继承自它爸爸。其实true/false最安全，所有浏览器基本上都支持。但是其他的，就不确定了。例如google中还可以设置为plaintext-only，也就是不支持富文本，不论是怎样的文字，粘贴进来都没有格式，只有文字。

 当contenteditable一直为true时，则文本是支持富文本的，如果你想你的div只能输入纯文本，记得处理，这里有一个方法，虽然我一直为大神打call，不过我测试时用的google，没起作用，不过大神自己也说了没仔细测。

 当contenteditable为false时，就只能展示纯文本了，哪怕你刚刚输入进去的是富文本。可以看下下面这个动图，操作顺序是：

contenteditable=false  ——   双击（contenteditable=true） 
——  粘贴准备好的富文本（显示为富文本，目前为可编辑状态）  ——  单击其他地方（contenteditable=false，显示纯文本，第二行请忽略掉，是功能需求）