記得幾年前就碰到過這種需求，現(xiàn)在又碰到了，解決方法就是用contenteditable屬性來模擬textarea或者input來實現(xiàn)根據(jù)輸入內(nèi)容高度自適應(yīng),因為contenteditable屬性的元素有自帶的這個屬性，但是這種模擬的有很多不確定的元素，比如說用戶復(fù)制粘貼進去，會直接粘貼進去html，不是純文本，怎么解決呢？？有三種辦法，下面我們來看一下

注: 如果在IOS上用contenteditable 模擬輸入框，點擊時可以彈出鍵盤但是無法輸入，加一個樣式-webkit-user-select:text 就可以了

1. 第一種方法是用css來控制，但是只兼容移動端或者webkit內(nèi)核的瀏覽器

html

<div class="div read-write-plaintext-only"></div>

css

.div{
  width:500px;
  min-height:100px;
  border:1px solid #ccc;
}
.read-only{
  /* 就是普通的元素，不能輸入 */
  -webkit-user-modify: read-only;
}
.read-write{
  /* 可以輸入富文本，也可以輸入純文本 */
  -webkit-user-modify: read-write;
}
.write-only{
  /* 可以忽略，沒有啥瀏覽器支持 */
  user-modify: write-only;
}
.read-write-plaintext-only{
  /* 只可以輸入純文本 */
  -webkit-user-modify: read-write-plaintext-only;
}

2. 第二種方法控制的是用contenteditable屬性，但是只兼容移動端或者webkit內(nèi)核的瀏覽器

首先我們看一下contenteditable屬性都有什么，events和caret具體什么意思，我不太明白，這不重要的，重要的是plaintext-only屬性值可以輸入純文本，true的話，可以輸入富文本和純文本，false代表不能輸入，就是一個普通的元素

contenteditable=""
contenteditable="events"
contenteditable="caret"
contenteditable="plaintext-only"
contenteditable="true"
contenteditable="false"

html

<!--只能輸入純文本-->
<div contenteditable="plaintext-only" class="div"></div>

<!--可以輸入富文本和純文本-->
<div contenteditable="true" class="div"></div>

css

.div{
  width:500px;
  min-height:100px;
  border:1px solid #ccc;
}

其實在國內(nèi)，大部分主流的瀏覽器都是webkit內(nèi)核的，上面的兩種方法都可以用，但是如果想兼容的話，只能上js了

3. 用粘貼事件，將粘貼板的內(nèi)容過濾成文本，然后再插入內(nèi)容

html

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

js

let oDiv=document.querySelector(".div");
oDiv.onpaste=function (e){
  e.preventDefault();
  var text = null;
  
  if(window.clipboardData && clipboardData.setData) {
    // IE
    text = window.clipboardData.getData('text');
  } else {
    text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('在這里輸入文本');
  }
  if (document.body.createTextRange) {    
    if (document.selection) {
      textRange = document.selection.createRange();
    } else if (window.getSelection) {
      sel = window.getSelection();
      var range = sel.getRangeAt(0);
      
      // 創(chuàng)建臨時元素，使得TextRange可以移動到正確的位置
      var tempEl = document.createElement("span");
      tempEl.innerHTML = "&#FEFF;";
      range.deleteContents();
      range.insertNode(tempEl);
      textRange = document.body.createTextRange();
      textRange.moveToElementText(tempEl);
      tempEl.parentNode.removeChild(tempEl);
    }
    textRange.text = text;
    textRange.collapse(false);
    textRange.select();
  } else {
      // Chrome之類瀏覽器
      document.execCommand("insertText", false, text);
  }
};

注: 本文章是參考大佬張鑫旭的文章-小tip: 如何讓contenteditable元素只能輸入純文本