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 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
js tab 选项卡
Apr 26 Javascript
JS冒泡事件的快速解决方法
Dec 16 Javascript
jQuery中click事件的定义和用法
Dec 20 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
详解JavaScript UTC时间转换方法
Jan 07 Javascript
JS button按钮实现submit按钮提交效果
Nov 01 Javascript
jQuery实现表格元素动态创建功能
Jan 09 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
基于Vue的商品主图放大镜方案详解
Sep 19 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 Javascript
vue-router 路由传参用法实例分析
Mar 06 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
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
php面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
php中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
浅析Vue中method与computed的区别
2018/03/06 Javascript
JS中实现浅拷贝和深拷贝的代码详解
2019/06/05 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
[45:25]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
python中defaultdict的用法详解
2017/06/07 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
python3中eval函数用法使用简介
2019/08/02 Python
pycharm 安装JPype的教程
2019/08/08 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
python中reload重载实例用法
2020/12/15 Python
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
小学教师师德反思
2014/02/03 职场文书
外国人聘用意向书
2014/04/01 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
90条交通安全宣传标语
2019/10/12 职场文书