博客
关于我
jquery动态改变textarea高度,高度随着内容增加而自动变高,内容减少而自动变低
阅读量:294 次
发布时间:2019-03-03

本文共 635 字,大约阅读时间需要 2 分钟。

jQuery代码实现自适应高度 textarea

作为开发人员,以下 jQuery 实现可以帮助 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);
});
});
}
});

function _adjustH(elem) {

var $obj = jQuery(elem);
return $obj.css({
height: $obj.attr('_initAdjustHeight'),
'overflow-y': 'hidden'
}).height(elem.scrollHeight);
}

在项目中使用时,可通过以下方式调用:

$(function() {

$('textarea').autoHeight();
});

该实现通过设置初始高度并响应输入事件,确保 textarea 始终保持合适的尺寸。

转载地址:http://bxyl.baihongyu.com/

你可能感兴趣的文章
Operation not supported on read-only collection 的解决方法 - [Windows Phone开发技巧系列1]
查看>>
OperationResult
查看>>
Operations Manager 2007 R2系列之仪表板(多)视图
查看>>
operator new and delete
查看>>
operator new 与 operator delete
查看>>
operator() error
查看>>
OPPO K3在哪里打开USB调试模式的完美方法
查看>>
oppo后端16连问
查看>>
OPPO软件商店APP侵权投诉流程
查看>>
Optional用法与争议点
查看>>
Optional类:避免NullPointerException
查看>>
Optional讲解
查看>>
ORA-00069: cannot acquire lock
查看>>
ORA-00923: 未找到要求的 FROM 关键字
查看>>
ORA-00932: inconsistent datatypes: expected - got NCLOB【ORA-00932: 数据类型不一致: 应为 -, 但却获得 NCLOB 】【解决办法】
查看>>
ORA-00942 表或视图不存在
查看>>
ORA-01034: ORACLE not available
查看>>
ORA-01152: 文件 1 没有从过旧的备份中还原
查看>>
ORA-01207:文件比控制文件更新 - 旧的控制文件
查看>>
ORA-01795: 列表中的最大表达式数为 1000
查看>>