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中判断null、undefined与NaN的方法
Mar 26 Javascript
js的延迟执行问题分析
Jun 23 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
小程序从手动埋点到自动埋点的实现方法
Jan 24 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
Sep 04 Javascript
JavaScript 严格模式(use strict)用法实例分析
Mar 04 Javascript
Vue项目利用axios请求接口下载excel
Nov 17 Vue.js
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之sphinx
2013/05/15 PHP
php实现文件编码批量转换
2014/03/10 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
Laravel手动返回错误码示例
2019/10/22 PHP
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
jQuery简单创建节点的方法
2016/09/09 Javascript
Bootstrap select多选下拉框实现代码
2016/12/23 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
动态Axios的配置步骤详解
2018/01/12 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
vue使用过滤器格式化日期
2021/01/20 Vue.js
Python类的动态修改的实例方法
2017/03/24 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
python中logging库的使用总结
2017/10/18 Python
用python处理图片实现图像中的像素访问
2018/05/04 Python
python selenium 弹出框处理的实现
2019/02/26 Python
python中时间模块的基本使用教程
2019/05/14 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
深入了解NumPy 高级索引
2020/07/24 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
垃圾回收的优点和原理
2014/05/16 面试题
受伤赔偿协议书
2014/09/24 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
高中生军训感言
2015/08/01 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
详解Oracle块修改跟踪功能
2021/11/07 Oracle