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 相关文章推荐
IE6下JS动态设置图片src地址问题
Jan 08 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
Jquery取得iframe下内容的方法
Nov 18 Javascript
Tab切换组件(选项卡功能)实例代码
Nov 21 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
JavaScript6 let 新语法优势介绍
Jul 15 Javascript
JQuery异步提交表单与文件上传功能示例
Jan 12 Javascript
原生JS轮播图插件
Feb 09 Javascript
Angular 作用域scope的具体使用
Dec 11 Javascript
微信小程序 搜索框组件代码实例
Sep 06 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
May 10 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
php5 mysql分页实例代码
2008/04/10 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
js快速排序的实现代码
2013/12/08 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
jQuery实现定时隐藏对话框的方法分析
2018/02/12 jQuery
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
Python 处理图片像素点的实例
2019/01/08 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
python3下载抖音视频的完整代码
2019/06/05 Python
Django  ORM 练习题及答案
2019/07/19 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
少先队入队活动方案
2014/02/08 职场文书
《青蛙看海》教学反思
2014/04/23 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server