jquery实现textarea 高度自适应


Posted in Javascript onMarch 11, 2015

之前给大家分享过用Javascript控制文本框textarea高度随内容自适应增长收缩,今天花了点时间换了种实现方法,总结一下

jQuery.fn.extend({

            autoHeight: function(){

                return this.each(function(){

                    var $this = jQuery(this);

                    if( !$this.attr('_initAdjustHeight') ){

                        $this.attr('_initAdjustHeight', $this.outerHeight());

                    }

                    _adjustH(this).on('input', function(){

                        _adjustH(this);

                    });

                });

                /**

                 * 重置高度 

                 * @param {Object} elem

                 */

                function _adjustH(elem){

                    var $obj = jQuery(elem);

                    return $obj.css({height: $obj.attr('_initAdjustHeight'), 'overflow-y': 'hidden'})

                            .height( elem.scrollHeight );

                }

            }

        });

        // 使用

        $(function(){

            $('textarea').autoHeight();

        });

以上就是本文所述的全部内容了,希望对大家学习jQuery能够有所帮助。

Javascript 相关文章推荐
jQuery中:last选择器用法实例
Dec 30 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
详解Vue组件之间的数据通信实例
Jun 17 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
vue组件之Alert的实现代码
Oct 17 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 Javascript
微信小程序上传文件到阿里OSS教程
May 20 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 Javascript
jQuery简单实现禁用右键菜单
Mar 10 #Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 #Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 #Javascript
jQuery实现当前页面标签高亮显示的方法
Mar 10 #Javascript
jQuery简单几行代码实现tab切换
Mar 10 #Javascript
jQuery实现高亮显示的方法
Mar 10 #Javascript
jQuery实现切换字体大小的方法
Mar 10 #Javascript
You might like
聊天室php&mysql(二)
2006/10/09 PHP
基于PHP文件操作的详解
2013/06/05 PHP
初识Laravel
2014/10/30 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
vue穿梭框实现上下移动
2021/01/29 Vue.js
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
Python程序语言快速上手教程
2012/07/18 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
办公室人员先进事迹
2014/01/27 职场文书
文明青少年标兵事迹材料
2014/01/28 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
税务会计岗位职责
2014/02/18 职场文书
2014年巴西世界杯口号
2014/06/05 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
个人委托书如何写
2014/09/25 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android
vue中data里面的数据相互使用方式
2022/06/05 Vue.js