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 相关文章推荐
xml 封装与解析(javascript和C#中)
Jul 26 Javascript
jQuery 表单验证扩展代码(二)
Oct 20 Javascript
js中设置元素class的三种方法小结
Aug 28 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
JS添加删除DIV的简单实例
Jul 08 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 Javascript
JS数组方法slice()用法实例分析
Jan 18 Javascript
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读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
php+MySQL判断update语句是否执行成功的方法
2014/08/28 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
php简单日历函数
2015/10/28 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
模仿jQuery each函数的链式调用
2009/07/22 Javascript
javascript 触发事件列表 比较不错
2009/09/03 Javascript
jquery插件之easing使用
2010/08/19 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
nodejs实现获取当前url地址及url各种参数值
2015/06/25 NodeJs
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
JS几个常用的函数和对象定义与用法示例
2020/01/15 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
python3+PyQt5实现自定义窗口部件Counters
2018/04/20 Python
深入了解python中元类的相关知识
2019/08/29 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
JSF的标签库有哪些
2012/04/27 面试题
2014年师德师风学习材料
2014/05/16 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书