css 属性:user-modify 让html标签变成可编辑

这几天看到顺丰的移动端的页面改版了 发现很有趣研究了一下。突然现在他有一个div标签可以编辑。一开始以为是用js写的脚本。后续发现使用 user-modify属性写的，所以研究了一下。

当我们有一个需求的时候，需要用到这个属性，其实如果只是用来输入字符，不推荐使用，因为这个没有input的功能多，比如限制输入长度，和placeholder等等。

只有当我们需要一个根据你输入的字数去自动改变高度的时候我们就需要用到这个属性。

有人可能会说 为什么不直接使用<textarea></textarea>

当我们使用<textarea></textarea>会出现一个问题 高度不能自增

那么我们只能使用第二个解决方案 :

contenteditable 属性可以轻松的使标签变成可编辑状态，只需要在html标签上加上contenteditable="true"，就可以轻松的模拟文本域了:

<div contenteditable="true" class="input"></div>

 

此时文本域的高度是由该 div 标签来控制的，所以只要不写死 div 的高度，该文本域的高度就会随着文字换行自增自减。

.input{
  width: 300px;
  min-height: 30px;
  max-height: 90px;
  overflow-y: auto
}

 但是contenteditable 有一个致命的问题，当你要复制html代码的时候不会自动过滤 html 代码 会直接帮你转换成html标签使用。

为了解决这些问题我们只能使用user-modify 来实现这个需求。

通过百度，发现了 user-modify 这个css属性, user-modify 支持以下四个值：

• user-modify: read-only;
• user-modify: read-write;
• user-modify: write-only;
• user-modify: read-write-plaintext-only

区别是前者可以输入富文本，后者只可以输入纯文本。
所以就可以不用设置 contenteditable="true" 了，而改用 user-modify: read-write-plaintext-only，问题就迎刃而解了。
另外需要加浏览器前缀，光写user-modify 是不支持的，需要写成 -webkit-user-modify、-moz-user-modify
所以这篇文章就教了你一个css属性 user-modify :)。

参考文献:https://www.zhangxinxu.com/wordpress/2016/01/contenteditable-plaintext-only/

https://www.cnblogs.com/smartXiang/p/6680610.html