user-modify属性，让html标签可以编辑

其实这只是一个很小的需求，但是写着写着发现干货越来越多，所以特意给大家分享一下。

项目需要做一个类似QQ聊天输入的效果

有的同学说，这不是很简单吗？一开始我也这么感觉 :)

观察需求

1.整体固定在底部
2.左侧为编辑区域
3.右侧按钮应该为固定宽度
4.随着输入文字变多，输入域高度向上自增，且有一个阈值

好的，开始写（啪啪啪啪），这点布局难不了我，基本布局应该是这样的

<div class="input_area"> <div class="input_area-input"> <textarea></textarea> </div> <div class="input_area-btn"></div> </div>

但是问题来了，textarea 的高度如何自增呢？鄙人不才，想不出来。:)
于是我百度了一下，几乎都需要很长的js代码来解决，而且效果还很不理想。

textarea 不行的话，只能用B计划了: contenteditable

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

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

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

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

好了，解决了高度问题我们开始布局css,这里我使用了less

<div class="input_area"> <div class="input_area-input-wrap"> <div class="input_area-input" contenteditable="true"></div> </div> <div class="input_area-btn-wrap"> <div class="input_area-btn">发送</div> </div> </div>

*{box-sizing: border-box}
html{background-color: #f1f1f1}

.input_area{
  @input_area-height: 40px;
  width: 100%;
 position: fixed;  bottom: 0;  left: 0;  padding: 3px 0 3px 5px; @button-width: 80px; &-input-wrap{  width: 100%;  padding-right: @button-width; } &-input{ @line-height: @input_area-height - 6 - 8;  width: 100%;  min-height: @line-height;  max-height: @line-height * 4;  padding: 0px; color: green;">#fff;  border-radius: 4px;  outline: none;  padding: 4px 8px;  line-height: @line-height;  overflow-y: auto; } &-btn-wrap{  width: @button-width;  height: @input_area-height;  position: absolute;  right: 0;  bottom: 0;  padding: 3px 5px; } &-btn{  width: 100%;  height: 100%;  padding: 0px; color: green;">#EA5A49;  color: #fff;  text-align: center;  line-height: @input_area-height - 6;  border-radius: 4px; } } 

页面变成了这样

恩，效果很不错，很满意。
但是还有一个问题，contenteditable="true"复制粘贴的时候不能过滤html标签

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

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

read-write 和 read-write-plaintext-only 会让元素表现得像个文本域一样，可以focus以及输入内容。
区别是前者可以输入富文本，后者只可以输入纯文本。
所以就可以不用设置 contenteditable="true" 了，而改用 user-modify: read-write-plaintext-only，问题就迎刃而解了。
所以这篇文章就教了你一个css属性 user-modify :)，关于更多这个属性的介绍可以看这篇博文

小tip: 如何让contenteditable元素只能输入纯文本