文章内容
一、设置控件行高与高度一致
<textarea id="data" data-val="" style="resize: none; width: 100px; height: 20px; line-height: 20px; word-break: break-all;"
onkeyup="test(this)"></textarea>
二、控件高度自动增加
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());
}
}