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;
    background-color: #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%;
    background-color: #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，问题就迎刃而解了。
另外需要加浏览器前缀，光写user-modify 是不支持的，需要写成 -webkit-user-modify、-moz-user-modify
所以这篇文章就教了你一个css属性 user-modify 😃，关于更多这个属性的介绍可以看这篇博文

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