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控制表格隔行变色
Jun 26 Javascript
了解了这些才能开始发挥jQuery的威力
Oct 10 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
JS获取年月日时分秒的方法分析
Nov 28 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
Dec 04 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
BootStrapTable服务器分页实例解析
Dec 20 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
Mar 01 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 Javascript
浅谈vant组件Picker 选择器选单选问题
Nov 04 Javascript
vue数据字典取键值项目的字典问题
Apr 12 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中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
js简单时间比较的方法
2016/08/02 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
不要用强制方法杀掉python线程
2017/02/26 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
python程序输出无内容的解决方式
2020/04/09 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
大学生毕业求职的自我评价
2013/09/29 职场文书
家长对孩子的感言
2014/03/10 职场文书
仓库管理员岗位职责
2014/03/19 职场文书
信息员培训方案
2014/06/12 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
mysql中关键词exists的用法实例详解
2022/06/10 MySQL