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 相关文章推荐
js技巧--转义符"\"的妙用
Jan 09 Javascript
select组合框option的捕捉实例代码
Sep 30 Javascript
javascript 构造函数强制调用经验总结
Dec 02 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 Javascript
javascript限制文本框输入值类型的方法
May 07 Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 Javascript
详解vue使用$http服务端收不到参数
Apr 19 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
layui实现三级联动效果
Jul 26 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
vue在响应头response中获取自定义headers操作
Jul 24 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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
Dom在ajax技术中的作用说明
2010/10/25 Javascript
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
javascript动态设置样式style实例分析
2015/05/13 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
JS中数据结构之栈
2019/01/01 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
高效使用Python字典的清单
2018/04/04 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
Python 实现取多维数组第n维的前几位
2019/11/26 Python
keras slice layer 层实现方式
2020/06/11 Python
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
财务出纳岗位职责
2014/02/03 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
加班费申请报告
2015/05/15 职场文书
2016年元旦寄语
2015/08/17 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript
配置nginx负载均衡
2022/05/06 Servers