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 相关文章推荐
基于jquery的无刷新分页技术
Jun 11 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
Apr 23 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
Oct 17 Javascript
Element Input组件分析小结
Oct 11 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
详解vue 兼容IE报错解决方案
Dec 29 Javascript
详解vue 图片上传功能
Apr 30 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
分享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
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
利用PHP实现短域名互转
2013/07/05 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
Javascript 面向对象之重载
2010/05/04 Javascript
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
jquery isType() 类型判断代码
2011/02/14 Javascript
JQuery触发事件例如click
2013/09/11 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
python实现外卖信息管理系统
2018/01/11 Python
python各类经纬度转换的实例代码
2019/08/08 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
C语言中break与continue的区别
2012/07/12 面试题
家长给幼儿园的表扬信
2014/01/09 职场文书
《陶罐和铁罐》教学反思
2014/02/19 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
信仰纪录片观后感
2015/06/08 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
《我是什么》教学反思
2016/02/16 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
python 命令行传参方法总结
2021/05/25 Python
Pygame如何使用精灵和碰撞检测
2021/11/17 Python
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers
Spring中bean集合注入的方法详解
2022/07/07 Java/Android