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 相关文章推荐
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
Javascript delete 引用类型对象
Nov 01 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
javascript 常用验证函数总结
Jun 28 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 Javascript
JS字符串补全方法padStart()和padEnd()
May 27 Javascript
JS如何实现基于websocket的多端桥接平台
May 14 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
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
JS 实现图片直接下载示例代码
2013/07/22 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
python 数据加密代码
2008/12/24 Python
初步认识Python中的列表与位运算符
2015/10/12 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
Python with语句和过程抽取思想
2019/12/23 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
汽车工程专业应届生求职信
2013/10/19 职场文书
领导失职检讨书
2014/02/24 职场文书
事业单位考核材料
2014/05/21 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL
python中的random模块和相关函数详解
2022/04/22 Python