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元素只能輸入純文本