jQuery实现textarea高度自适应

andorcba 2015-10-08

展开全文

jQuery实现textarea高度自适应

Oct 15, 2014

最近在开发一个Web App, 需要用到可以随用户输入而自动适应高度的textarea, 这里实现了一种近乎完美的方法。 演示页面

该方法的基本思想是：绑定textarea的input事件，在检测到输入后，将textarea设置为一个基本高度，然后获取scrollHeight, 再将其高度设置为scrollHeight，这样textarea就能随着用户输入自适应高度，当然为了达到近乎完美的效果这里需要一些技巧。

javascriptadaptiveHeight

var adaptiveHeight = function(a, baserows, maxrows) {
/*
    a: textarea元素
    baserows: 基础行数
    maxrows: 最大行数
*/
    /*获取textarea的padding的上下高度*/
    var po =  parseInt(a.css('padding-top')) + parseInt(a.css('padding-bottom'));
    var baseLineHeight = parseInt(a.css('line-height'));
    var baseHeight = baseLineHeight * baserows;
    a.height(baseHeight);
    var scrollval = a[0].scrollHeight;
    /*检测是否达到了最大行数，达到了，则把高度设置为最大高度*/
    if (scrollval - po >= baseLineHeight * maxrows) {
        scrollval = baseHeight + baseLineHeight * (maxrows-baserows) + po;
    }
    a.height(scrollval - po);
};

height()方法获取的实际上是行高度，而scrollHeight获取的高度是行高度加上了padding的上下高度，所以在重新设置高度的时候为scrollHeight - po (textarea的padding的上下高度)，这样才能保证高度变化一致。

csstextarea css

textarea{
  display: block;
  height: auto;
  resize: none;
  font-size: 14px;
  line-height: 20px;
  padding: 1px;
}

这里需要把高度设置为auto，实际高度由该方法根据line-height和padding来设置。

最后把该方法绑定到input事件上

javascriptadaptiveTextarea

var adaptiveTextarea = function(sel, baserows, maxrows, callback){
    sel.bind('input propertychange', function(e) {
        adaptiveHeight($(this), baserows, maxrows);
        if(callback) callback(e);
    });
    /*初始化textarea高度*/
    adaptiveHeight(sel, baserows, maxrows);
};

/*使用 初始行数为1， 最大行数为5*/
adaptiveTextarea($('textarea'), 1, 5);

演示页面

~EOF~