textarea高度自适应

一.前言

当textarea内容增多时，就会出现一个让人讨厌的滚动条，怎么样让textarea高度随内容自适应呢？

 

 二.使用H5 contenteditable 属性代替

contenteditable 属性规定元素内容是否可编辑。

(如果元素未设置 contenteditable 属性，那么元素会从其父元素继承该属性)

HTML:

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

CSS:

min-height: 100px; width: 200px;

优点：简单明了

缺点：1.需要过滤HTML标签

           2.IE6浏览器对min/max无效

min-height: 200px; _height: 200px;

           3.placeholder和maxlength等属性需要js设置

           4.换行的问题

              iE浏览器下（IE6~8），输入文字回车的时候，div内部是会自动产生p标签包含每行元素的，而其他浏览器貌似是产生br标                签。由于默认的p标签是有1em大小的上下margin值的，清除p标签的margin值：

p{ margin: 0; }

 

三.js事件监听动态改变textarea高度

JS:

$("textarea:first").on("input propertychange keyup change",function(){
             $(this).height(this.scrollHeight);
        })
// Add input event listeners
// * input for modern browsers
// * propertychange for IE 7 & 8
// * keyup for IE >= 9: catches keyboard-triggered undos/cuts/deletes
// * change for IE >= 9: catches mouse-triggered undos/cuts/deletions (when textarea loses focus)
// scrollHeighr返回元素的完整高度，textarea的默认border，padding要置0

基本上所有的jquery插件核心都是这段代码，但是实际上它的效果非常坑爹

1.它响应的是keyup事件，因此也就是说肯定会有延迟。

2.它也有兼容性问题，再某些浏览器上(比如safari)，它的scrollHeight会莫名奇妙地多出一些，看起来非常奇怪

 

四.textarea高度继承父元素

HTML：

<div class="expandingArea ">
    <pre><span></span><br></pre>
    <textarea placeholder="输入文字"></textarea>
</div>

其中的expandingArea的样式仅有

.expandingArea{
    position:relative;
}

目的是用于textarea相对于expandingArea绝对定位：

textarea{
    position:absolute;
    top:0;
    left:0；
    height:100%;
}

通过这样的样式设置，textArea的高度会始终等于expandingArea的高度。

pre{
    display:block;
    visibility:hidden;
}

pre以块形式存在，并且不可见，但是是占用空间的。

这时需要把textarea中的内容实实的同时到pre里的span标签中，pre会随内容的高度变化而变化，expandingArea的高度又随pre变化，因为textarea的高度100%textarea的高度会随expandingArea变化，

这方法来自github一位大神，附上demo链接，有具体的js实时绑定已经html标签过滤 

http://alexdunphy.github.io/flexText/