jquery 插件实现多行文本框[textarea]自动高度


Posted in Javascript onMarch 04, 2015

实现功能:

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();

以上就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Javascript中的数学函数
Apr 04 Javascript
将函数的实际参数转换成数组的方法
Jan 25 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
js判断出两个字符串最大子串的函数实现方法
Nov 01 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
jQuery实现列表的增加和删除功能
Jun 14 jQuery
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
详解JavaScript原型与原型链
Nov 16 Javascript
vue的项目如何打包上线
Apr 13 Vue.js
JavaScript常用脚本汇总(三)
Mar 04 #Javascript
JavaScript常用脚本汇总(二)
Mar 04 #Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 #Javascript
JavaScript常用脚本汇总(一)
Mar 04 #Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 #Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 #Javascript
JavaScript中的关联数组问题
Mar 04 #Javascript
You might like
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
javascript jQuery插件练习
2008/12/24 Javascript
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
javascript 数组排序函数
2009/08/20 Javascript
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
2016/06/22 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
vue和react等项目中更简单的实现展开收起更多等效果示例
2018/02/22 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
Python如何存储数据到json文件
2020/03/09 Python
基于python实现对文件进行切分行
2020/04/26 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
教师工作自我鉴定范文
2014/09/14 职场文书
2015年发展党员工作总结报告
2015/03/31 职场文书
vue中 this.$set的使用详解
2021/11/17 Vue.js
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL
MySQL导致索引失效的几种情况
2022/06/25 MySQL
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android