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 相关文章推荐
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 Javascript
原生js实现弹出层效果
Jan 20 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
使用webpack搭建vue项目及注意事项
Jun 10 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
图解JS原型和原型链实现原理
Sep 15 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
php缓冲输出实例分析
2015/01/05 PHP
php代码架构的八点注意事项
2016/01/25 PHP
PHP Swoole异步MySQL客户端实现方法示例
2019/10/24 PHP
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
js URL参数的拼接方法比较
2012/02/15 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
举例详解Python中的split()函数的使用方法
2015/04/07 Python
python利用装饰器进行运算的实例分析
2015/08/04 Python
python中sys.argv函数精简概括
2018/07/08 Python
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
对python特殊函数 __call__()的使用详解
2019/07/02 Python
Python脚本利用adb进行手机控制的方法
2019/07/08 Python
Python对wav文件的重采样实例
2020/02/25 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
python爬虫线程池案例详解(梨视频短视频爬取)
2021/02/20 Python
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
四个太阳教学反思
2014/02/01 职场文书
市场营销大学生职业规划书
2014/02/25 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
联谊会开场白
2015/06/01 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
利用JavaScript写一个简单计算器
2021/11/27 Javascript