div可编辑user-modify/contenteditable

以你之姓@ 2022-06-01 06:47 233阅读 0赞

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

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

![SouthEast][]

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

![SouthEast 1][]

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

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

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

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

![SouthEast 2][]

[下载完整代码learning-everything/javascript/editDIV\_and\_limitnumber][learning-everything_javascript_editDIV_and_limitnumber]。

[Link 1]: http://www.zhangxinxu.com/study/201601/user-modify.html
[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-user-modify
[SouthEast]: /images/20220601/1e3fd02db1594a3a962879d7cc91606f.png
[Link 2]: https://www.w3.org/community/editing/wiki/ContentEditable
[Link 3]: http://www.w3school.com.cn/html5/att_global_contenteditable.asp
[SouthEast 1]: /images/20220601/020a5166e6e14a1fbd38af0fb1098114.png
[Link 4]: http://www.zhangxinxu.com/wordpress/2016/01/contenteditable-plaintext-only/#comment
[SouthEast 2]: /images/20220601/f30a531ced464798b72fa604bec8adc1.png
[learning-everything_javascript_editDIV_and_limitnumber]: https://github.com/Epulari/learning-everything/tree/master/javascript/editDIV_and_limitnumber