javascript - 如何创建一个高度自适应的textarea

我的思路是，用一个p实时去获取textarea的内容，因为p高度是根据内容变化而变化的。我们可以得到p的高度，再反过来把p的高度设置给textarea。

http://www.jacklmoore.com/autosize/
这个插件可以完美的解决你们所遇到的问题

试一下

/** fake code **/
textarea.keydown = function(e){
    if e.keycode == 13 { //忘了回车的 key code 是不是13了
        textarea.height = textarea.height + 1em;
    }
}

我一直在使用这段代码
https://gist.github.com/1192205

表示回车的时候增加一字行高就应该不会出现滚动条闪烁的问题了吧?

/** fake code **/
textarea.keydown = function(e){
    if e.keycode == 13 { //忘了回车的 key code 是不是13了
        textarea.height = textarea.height + 1em;
    }
}

可以添加一个隐藏的textArea（类似1楼的方法），取这个textArea的scrollHeight然后设置给输入的textArea，不过这里还是要处理取值后的一些兼容性问题。关于keyup事件的问题，最好是用oninput事件和onpropertychange事件来替代，这样可以处理用鼠标添加或删除文字的问题，不过貌似ie9下使用backspace键删除文字不会触发onpropertychange事件，需要单独处理一下

确实我在考虑这个功能的时候，已经测试了很多方案，除了你说的两个方案我还使用了一个方案，这个方案我正在测试，但是如果能改进一些小毛病的话，体验肯定比当前的要好。

我是这样考虑的，既然scrollHeight不可信，那么我们就要寻找一个可信的height标准。我们另外创建一个p，让它的css完全继承自这个textarea，因为p的height是可以自由浮动伸缩的，所以我们截获textarea的keyup事件，然后把它的内容发送到p里，然后我们通过获取p的高度来定义textarea的高度。

在实现这个功能之前，还有个需要实现的功能，那就是拷贝css到另一个元素，索性网上已经有现成的jQuery解决方案

// 获取一个元素的所有css属性的patch, $(el).css()
jQuery.fn.css2 = jQuery.fn.css;
jQuery.fn.css = function() {
    if (arguments.length) return jQuery.fn.css2.apply(this, arguments);
    var attr = ['font-family','font-size','font-weight','font-style','color',
        'text-transform','text-decoration','letter-spacing', 'box-shadow',
        'line-height','text-align','vertical-align','direction','background-color',
        'background-image','background-repeat','background-position',
        'background-attachment','opacity','width','height','top','right','bottom',
        'left','margin-top','margin-right','margin-bottom','margin-left',
        'padding-top','padding-right','padding-bottom','padding-left',
        'border-top-width','border-right-width','border-bottom-width',
        'border-left-width','border-top-color','border-right-color',
        'border-bottom-color','border-left-color','border-top-style',
        'border-right-style','border-bottom-style','border-left-style','position',
        'display','visibility','z-index','overflow-x','overflow-y','white-space',
        'clip','float','clear','cursor','list-style-image','list-style-position',
        'list-style-type','marker-offset'];
    var len = attr.length, obj = {};
    for (var i = 0; i < len; i++) 
        obj[attr[i]] = jQuery.fn.css2.call(this, attr[i]);
    return obj;
};

有了这两个代码，我们就可以来实现了

$('textarea').keyup(function () {
    var t = $(this);
    
    if (!this.justifyDoc) {
        this.justifyDoc = $(document.createElement('p'));

        // copy css
        this.justifyDoc.css(t.css()).css({
            'display'   :   'block',        // you can change to none
            'word-wrap' :   'break-word',
            'min-height':   t.height(),
            'height'    :   'auto'
        }).insertAfter(t.css('overflow-y', 'hidden'));
    }

    var html = t.val().replace(/&/g, '&')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/'/g, '&#039;')
        .replace(/"/g, '&quot;')
        .replace(/ /g, '&nbsp;')
        .replace(/((&nbsp;)*)&nbsp;/g, '$1 ')
        .replace(/\n/g, '<br />')
        .replace(/<br \/>[ ]*$/, '<br />-')
        .replace(/<br \/> /g, '<br />&nbsp;');

    this.justifyDoc.html(html);
    t.height(this.justifyDoc.height());
});

它的运行效果如下

它只有一个毛病，那就是换行的时候有一点延迟，也就是字符先换行了，然后才会被拉伸，因为我们响应的是keyup事件。实际上我想延迟是无法克服的，但能否想一个办法，让这个过程不要那么突兀呢?

终极答案

前些日子有过textarea高度自适应的需求，找到一个插件flexText,
虽然没有用上去，但是的精简的代码很吸引我。

它是原理是这样的，HTML结构如下：

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

其中的expandingArea的样式仅有

.expandingArea{
    position:relative;
}

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

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

通过这样的样式设置，textArea的高度会始终等于expandingArea的高度，要让textarea的高度变化也只需要调整
expadingArea的高度即可。那么怎么样让expandingArea的高度变化随内容高度变化而变化呢？pre是比较重要的
东西。

pre{
    display:block;
    visibility:hidden;
}

pre以块形式存在，并且不可见，但是是占用空间的，不像display:none;什么空间也不占。这时需要把textarea中的内容实实的同时到pre里的span标签中，因为pre没有postion:absolute所以它的高度会一直影响expandingArea的高度。总结原理就是：pre会随内容的高度变化而变化，expandingArea的高度又随pre变化，因为textarea的高度100%textarea的高度会随expandingArea变化，只要同步textarea的内容到pre中，就达到一个textarea随内容高度变化的目的了。

关于这个方法的兼容性问题 在这个方法的创始人博客有提到NEIL JENKINS。个人觉得这个方法是牛逼的，没有通过计算，逻辑上它像上思维推导，代码实现不复杂，轻松愉快。在这个例子中又看到了一次合理的结构可以简化代码的案例:)。