textarea标签单行变多行，类似QQ，微信输入框效果

首先先明确下，这种"单行变多行的效果"只能是基于textarea控件！没有之一！绝逼不包括input，它是行内元素，而且必须肯定是单行，先天性"缺陷"。

还有个需要介绍的事件就是onpropertychange，这也是我来第二家公司才知道的，可以实时监听控件内容变化，对于检测 textarea,
input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发（添加一个字符或者减少一个字符，总之输入框只要“动”一次，就立即出发），不像 onchange 事件需要失去焦点才触发。同时也支持粘贴剪切功能。总之非常强大。

下面亲测一把：

/*

*param1：待确定实现元素对象

*param2：原先对象起始显示时的行数

*param3：设置该元素最大行数

*/

adaptiveTextarea($('#txtDailyContent'), 3, 8);

/*

*param1：所要设置对象的jq对象

*原对象的起始行高数

*所要设置到的最大行高数

**/初始化一个函数对象，同时参数列表给4个

var adaptiveTextarea = function(sel, baserows, maxrows, callback){

//这里对所选jq对象进行添加propertychange事件监听

sel.bind('input propertychange', function(e) {

adaptiveHeight($(this), baserows, maxrows);

if(callback) callback(e);

});

adaptiveHeight(sel, baserows, maxrows);

};

var adaptiveHeight = function(ele, baserows, maxrows) {
//首先拿到该jq对象的上下padding值

var po = parseInt(ele.css('padding-top')) + parseInt(ele.css('padding-bottom'));
//再拿到该jq对象的行高

var baseLineHeight = parseInt(ele.css('line-height'));
//计算该jq对象的初始高度（原先行高 * 原先默认行数）

var baseHeight = baseLineHeight * baserows;
//设置该jq对象的显示高度

ele.height(baseHeight);
//计算该jq对象向上滚动高度

var scrollval = ele[0].scrollHeight;
//判断，如果向上滚动高度减去该jq对象上下padding值大于等于默认行高 * 最大行数时

if (scrollval - po >= baseLineHeight * maxrows) {
//此时的高度为，默认高度加上默认行高数*相差的行数 再加上上下padding值

scrollval = baseHeight + baseLineHeight * (maxrows-baserows) + po;

}
//此时给该jq对象重新设置显示高度

ele.height(scrollval - po);

};

亲测，此方法可以实现对单行输入框变多行效果，类似微信，qq聊天输入框输入多行文本时会自动变成多行文本
输入框状态，同时这也仅仅对textarea这种控件有效，对input类无效。