jquery 插件实现多行文本框[textarea]自动高度
更新时间：2015年03月04日 15:58:00 投稿：hebedich
这篇文章主要介绍了jquery 插件实现多行文本框[textarea]自动高度,需要的朋友可以参考下
实现功能:
1/当textarea换行时自动增加一行高度
2/当textarea删除一行时 自动减少一行的高度 依赖:jquery.xxx.js 工作中需要使用类似功能但是觉得使用插件需要导入其他文件很不方便所以就写了一个
textarea jquery插件
复制代码 代码如下:
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="form-field-5"> 内容</label>
<div class="col-sm-9">
<textarea class="col-sm-8" id="form-field-5" placeholder="请输入内容..."></textarea>
</div>
</div>
复制代码 代码如下:
jQuery.extend({
textareaAutosize_dc: function() {
$("textarea").on("keyup", function(e) {
var currentEnterCount = $(this).val().split("\n").length;
var lineHeight = Number($(this).css("line-height").replace("px", ""));
var enterCount = $(this).attr("enterCount");
if (currentEnterCount < enterCount && enterCount != undefined) {
//每行减掉固定行高
$(this).height($(this).height() - lineHeight);
} else if (currentEnterCount > enterCount) {
//每行加入固定行高
$(this).height($(this).height() + lineHeight);
$(this).attr("enterCount", currentEnterCount);
}
//记录当前行高
$(this).attr("enterCount", currentEnterCount);
});
}
});
//调用自动高度
$.textareaAutosize_dc();
以上就是本文的全部内容了，希望大家能够喜欢。
相关文章
这款导航当浏览器滚动条位于顶部时，导航高度较高，当浏览器滚动向下滚动时，导航高度自动减低，并位于顶部2014-11-11
这篇文章主要为大家详细介绍了使用ajaxfileupload.js实现上传文件功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要为大家介绍了jQuery一键移除使项目脱离对它的依赖使用方式，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
这篇文章主要介绍了Javascript中的Array数组对象,需要的朋友可以参考下2014-03-03
jquery next nextAll nextUntil siblings的区别介绍
在本文为大家详细介绍下jquery next nextAll nextUntil siblings的区别，感兴趣的朋友可以参考下2013-10-10
这篇文章主要介绍jquery实现input输入什么div图层显示什么的具体过程,需要的朋友可以参考下2014-06-06
jquery.validate 自定义验证方法及validate相关参数
jquery.validate是一个基于jquery的非常优秀的验证框架，我们可以通过它迅速验证一些常见的输入,并且可以自己扩充自己的验证方法，而且对国际化也有非常好的支持，通过本文给大家介绍jquery.validate 自定义验证方法及validate相关参数，需要的朋友一起学习吧2016-01-01
一些基本的语法在使用中老忘掉,下列使用jQUery获取选中radio对应的值，刚刚想起来，感兴趣的朋友可以了解下2013-06-06
jQuery position() 函数详解以及jQuery中position函数的应用
position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移，也就是相对于被定位的祖辈元素的坐标。该函数只对可见元素有效，通过本文给大家介绍jQuery position() 函数详解以及jQuery中position函数的应用，感兴趣的朋友一起学习吧2015-12-12
Javascript函数中的arguments.callee用法实例分析
这篇文章主要介绍了Javascript函数中的arguments.callee用法,结合实例形式分析了arguments.callee操作当前方法引用的具体技巧,需要的朋友可以参考下2016-09-09
最新评论