div模擬textarea高度隨文本變化

最近做項目，移動端網頁模擬聊天對話，需要做輸入框隨文字變化而變化，但是遇到了問題。如果用textarea，單純的css不能實現這種效果，因此最開始選擇textarea，用js監聽 keydown，keyup事件，實現了隨文字增多高度增加。但是刪除文字後，高度卻不會變小。
這就遇到了一個bug。
下面附上js監聽textarea高度隨文本變化而變化的代碼

$("textarea").on("keyup keydown", function(event){
       var heiArr = $(this).css("line-height").split("px");
       var lineHei = parseInt(heiArr[0]);
       if(this.scrollHeight>3*lineHei){
           $(this).height(3*lineHei);
        }else{
           $(this).height(this.scrollHeight);
        }
        if(event.keyCode==8){
           $(this).height("auto");
        }
   });

event.keyCode == 8 是刪除文字監聽delete按鍵；但是這裏就遇到問題，能夠監聽到文字減少，但是無法設置文本框的高度。到這裏就遇到了麻煩。
後來在網上到處找解決方案，終於找到了滿意的方案。在此分享出來，供大家參考學習，共同進步。

在網上給出的方案都是用js監聽textarea的keyup和keydown事件，因此很多方案就是上述解決方案。後來偶然看到contenteditable=“ture”這個屬性。
contenteditable是個什麼東西呢？
下面來看看。
contenteditable 屬性規定是否可編輯元素的內容。
contenteditable 屬性是 HTML5 中的新屬性。

就是說我們可以對元素的內容進行編輯。
我們在一個div或者一個p元素中加上這個屬性，因此就可以對這個元素輸入或者刪除文本。

<div id="msgdata" class="text-box" contenteditable="true"></div>

重點css代碼：

.text-box{
    line-height: 1rem;min-height: 1rem;
    max-height: 3rem;overflow: auto;
}

經過測試，在pc和andriod上是完全可以用的，但是到了ios上面就不行了，能夠獲取到元素的focus事件，但是沒有焦點，不能編輯文本。
最開始也有這種預感，畢竟蘋果與衆不同嘛！！！
後來在網上找到webkit的擴展屬性：-webkit-user-select: text;
加上這句代碼，就解決了ios上不能編輯的問題。
最終的css代碼：

.text-box{
    line-height: 1rem;min-height: 1rem;
    max-height: 3rem;overflow: auto;
    -webkit-user-select: text;
}

後來有專門的搜索了contenteditable，發現這個屬性可以直接粘貼輸入富文本，不過沒有親測。那麼只需要輸入純文本呢？
contenteditable支持屬性如下：
user-modify: read-only;
user-modify: read-write;
user-modify: write-only;
user-modify: read-write-plaintext-only;
至此已經有了答案，給元素設置user-modify: read-write-plaintext-only;但是目前貌似只有webkit內核的瀏覽器支持這個屬性，因此我們的css應該加上webkit前綴。
代碼如下：

-webkit-user-modify: read-write-plaintext-only

使用標準的contenteditable屬性值的控制法同樣能夠實現輸入純文本；我們來詳解一下這個屬性的值。
contenteditable=””
contenteditable=”events”
contenteditable=”caret”
contenteditable=”plaintext-only”
contenteditable=”true”
contenteditable=”false”

當然contenteditable=”plaintext-only”這個屬性值和-webkit-user-modify: read-write-plaintext-only這個css代碼效果一樣，在webkit內核瀏覽器才能實現效果。