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 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
浅谈Vue数据绑定的原理
Jan 08 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
vue组件jsx语法的具体使用
May 21 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
element el-input directive数字进行控制
Oct 11 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 20 Javascript
JavaScript 对象创建的3种方法
Nov 17 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
js和php邮箱地址验证的实现方法
2014/01/09 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
几个有趣的Javascript Hack
2010/07/24 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
nodejs教程之入门
2014/11/21 NodeJs
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
vue的安装及element组件的安装方法
2018/03/09 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
jquery+php后台实现省市区联动功能示例
2019/05/23 jQuery
vue组件中实现嵌套子组件案例
2020/08/31 Javascript
十条建议帮你提高Python编程效率
2016/02/16 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
Python绘制股票移动均线的实例
2019/08/24 Python
Python 变量的创建过程详解
2019/09/02 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
豆腐の盛田屋官网:日本自然派的豆乳面膜、肥皂、化妆水、乳液等
2016/10/08 全球购物
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
社会学专业求职信
2014/07/17 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
会计入职心得体会
2016/01/22 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
React更新渲染原理深入分析
2022/12/24 Javascript