textarea高度自适应

57 篇文章 1 订阅
23 篇文章 0 订阅

之前虽然写了几篇关于textarea的高度自适应的解决方案,但都不甚满意,最近从Element的源码中得到启示,就自己写了一个textarea高度自适应的jquery插件。

所以就有了本篇博客的介绍:
autoHeightTextarea自适应高度的textarea是一款jquery插件,支持链式调用,支持设置最小行数、最小高度、最大行数和最大高度,在输入文字的时候实现textarea的高度自适应。

参数说明

参数描述
rows可以在textarea上设置 rows 又或者传参 rows 都可以设置textarea的一个最小行数
minRows可以在初始化的时候传参 minRows 或者在textarea上面设置 data-min-rows ,来确定textarea的一个最小行数
maxRows可以在初始化的时候传参 maxRows 或者在textarea上面设置 data-max-rows ,来确定textarea的一个最大行数
min-height可以在css中设置 min-height ,来确定textarea的最小高度
max-height可以在css中设置 max-height ,来确定textarea的最大高度

使用

使用的时候就像平常使用jquery一样:

$("#textarea1").autoHeightTextarea();

最终效果

1、minRows = Math.max($("textarea").attr("rows"), $("textarea").attr("data-min-rows"), rows, minRows);
2、maxRows = Math.min($("textarea").attr("data-max-rows");
3、如果设置的rows或者代表minRows大于代表maxRows的时候,则以 maxRows 的值设置 minRows 和 maxRows。

如果要看更具体的文档说明,可点击此处查看:http://www.fxss5201.cn/project/html/textarea/autoHeightTextarea/

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值