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 相关文章推荐
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
href下载文件根据id取url并下载
May 28 Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 Javascript
js识别uc浏览器的代码
Nov 06 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
Oct 25 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 Javascript
Vue多种方法实现表头和首列固定的示例代码
Feb 02 Javascript
Element Dropdown下拉菜单的使用方法
Jul 26 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统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
基于jquery的超简单上下翻
2010/04/20 Javascript
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
Python实现Linux命令xxd -i功能
2016/03/06 Python
Python注释详解
2016/06/01 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
通过cmd进入python的实例操作
2019/06/26 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
苹果香港官方商城:Apple香港
2016/09/14 全球购物
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
后勤人员自我鉴定
2013/10/20 职场文书
高一地理教学反思
2014/01/18 职场文书
关于读书的演讲稿
2014/05/07 职场文书
应届大专生求职信
2014/06/26 职场文书
连锁超市项目计划书
2014/09/15 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
南极大冒险观后感
2015/06/05 职场文书
摘录式读书笔记
2015/07/01 职场文书
用Python可视化新冠疫情数据
2022/01/18 Python
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python