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内核浏览器才能实现效果。