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,alert出现乱码问题的解决方法
Jun 19 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
VueJs 搭建Axios接口请求工具
Nov 20 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 Javascript
Vue中使用canvas方法总结
Feb 12 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 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
PHP中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
使用js画图之画切线
2015/01/12 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
python读取html中指定元素生成excle文件示例
2014/04/03 Python
基于Python实现文件大小输出
2016/01/11 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
python用requests实现http请求代码实例
2019/10/31 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
h5封装下拉刷新
2020/08/25 HTML / CSS
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
什么是属性访问器
2015/10/26 面试题
机械制造毕业生求职信
2014/03/03 职场文书
高中生评语大全
2014/04/25 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
2015年考研复习计划
2015/01/19 职场文书
拉贝日记观后感
2015/06/05 职场文书
vue+springboot实现登录验证码
2021/05/27 Vue.js
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js