css textarea行数_HTML textarea控件行数限制

一、设置控件行高与高度一致

οnkeyup="test(this)">

二、控件高度自动增加

jQuery.fn.extend({

autoHeight : function() {

return this.each(function() {

var $this = jQuery(this);

if (!$this.attr('_initAdjustHeight')) {

$this.attr('_initAdjustHeight', $this.outerHeight());

}

_adjustH(this).on('input', function() {

_adjustH(this);

});

_adjustH(this).on('keyup', function() {

_adjustH(this);

});

});

function _adjustH(elem) {

var $obj = jQuery(elem);

return $obj.css({

height : $obj.attr('_initAdjustHeight'),

'overflow-y' : 'hidden'

})

.height(elem.scrollHeight);

}

}

});

$(function() {

$('#data').autoHeight();

});

三、计算行数

function test(obj) {

console.log(Math.floor($(obj).height() / 20));

}

四、控制输入

function test(obj) {

var lineCount = Math.floor($(obj).height() / 20);

console.log("行数：" + lineCount);

//console.log("字数：" + $(obj).val().length);

if (lineCount > 1) {

$(obj).val($(obj).data("val"));

} else {

$(obj).data("val", $(obj).val());

}

}