jquery实现文本框textarea自适应高度


Posted in Javascript onMarch 09, 2016

浏览器中默认的文本框是不能根据内容的增多变高,只能固定高度有滚动条,体验不是很好,找了很多方法兼容都不行,总算找到个兼容良好的方法:

<body>
    <textarea id="textarea3" style="overflow-y:hidden; height:20px;resize: none">
     
    </textarea>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
      $(function() {
        //最小高度和最大高度默认
        $("#textarea1").textareaAutoHeight();
        //最大高度为100px
        $("#textarea2").textareaAutoHeight({maxHeight: 100});
        //最小高度为50px,最大高度为200px
        $("#textarea3").textareaAutoHeight({minHeight: 50, maxHeight: 200});
      })
 
 
      $.fn.extend({
        textareaAutoHeight: function(options) {
          this._options = {
            minHeight: 0,
            maxHeight: 1000
          }
 
          this.init = function() {
            for (var p in options) {
              this._options[p] = options[p];
            }
            if (this._options.minHeight == 0) {
              this._options.minHeight = parseFloat($(this).height());
            }
            for (var p in this._options) {
              if ($(this).attr(p) == null) {
                $(this).attr(p, this._options[p]);
              }
            }
            $(this).keyup(this.resetHeight).change(this.resetHeight)
                .focus(this.resetHeight);
          }
          this.resetHeight = function() {
            var _minHeight = parseFloat($(this).attr("minHeight"));
            var _maxHeight = parseFloat($(this).attr("maxHeight"));
 
            if (!$.browser.msie) {
              $(this).height(0);
            }
            var h = parseFloat(this.scrollHeight);
            h = h < _minHeight ? _minHeight :h > _maxHeight ? _maxHeight : h;
            $(this).height(h).scrollTop(h);
            if (h >= _maxHeight) {
              $(this).css("overflow-y", "scroll");
            }
            else {
              $(this).css("overflow-y", "hidden");
            }
          }
          this.init();
        }
      });
    </script>
  </body>

以上就是本文的全部内容,希望对大家学习jquery程序设计有所帮助。

Javascript 相关文章推荐
基于mootools插件实现遮罩层新手引导
May 24 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
Aug 14 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 Javascript
使用JS动态显示文本
Sep 09 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 Javascript
JavaScript的Set数据结构详解
Feb 18 Javascript
分享12个实用的jQuery代码片段
Mar 09 #Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 #Javascript
javascript html5移动端轻松实现文件上传
Mar 27 #Javascript
javascript事件绑定学习要点
Mar 09 #Javascript
js实现分割上传大文件
Mar 09 #Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 #Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 #Javascript
You might like
一个查看session内容的函数
2006/10/09 PHP
PHP数组交集的优化代码分析
2011/03/06 PHP
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
解析php中die(),exit(),return的区别
2013/06/20 PHP
javascript整除实现代码
2010/11/23 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
jquery判断类型是不是number类型的实例代码
2016/10/07 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
简明 Python 基础学习教程
2007/02/08 Python
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
python删除特定文件的方法
2015/07/30 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
Python离线安装PIL 模块的方法
2019/01/08 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
《临死前的严监生》教学反思
2014/02/13 职场文书
知识竞赛活动方案
2014/02/18 职场文书
幼儿园元旦家长感言
2014/02/27 职场文书
党的群众路线查摆剖析材料
2014/10/10 职场文书
2016高考感言
2015/08/01 职场文书
员工规章制度范本
2015/08/07 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
Java集成swagger文档组件
2021/06/28 Java/Android