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 相关文章推荐
js可突破windows弹退效果代码
Aug 09 Javascript
javascript获取当前ip的代码
May 10 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
Javascript访问器属性实例分析
Dec 30 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
vue-cli创建的项目中的gitHooks原理解析
Feb 14 Javascript
Javascript生成器(Generator)的介绍与使用
Jan 31 Javascript
JavaScript实现手风琴效果
Feb 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
杏林同学录(七)
2006/10/09 PHP
PHP在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
PHP 身份证号验证函数
2009/05/07 PHP
关于页面优化和伪静态
2009/10/11 PHP
php smarty模版引擎中的缓存应用
2009/12/02 PHP
PHP number_format() 函数定义和用法
2012/06/01 PHP
PHP类的特性实例分析
2016/09/28 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
javascript返回顶部的按钮实现方法
2016/01/09 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
node.js事件轮询机制原理知识点
2019/12/22 Javascript
jQuery实现简易聊天框
2020/02/08 jQuery
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
详解python运行三种方式
2019/05/13 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
python3安装crypto出错及解决方法
2019/07/30 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
Python绘制数码晶体管日期
2021/02/19 Python
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
七匹狼男装广告词
2014/03/21 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技