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 相关文章推荐
[JS]点出统计器
Oct 11 Javascript
jQuery Animation实现CSS3动画示例介绍
Aug 14 Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
12306验证码破解思路分享
Mar 25 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 Javascript
antd design table更改某行数据的样式操作
Oct 31 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使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
php实现的验证码文件类实例
2015/06/18 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
twig里使用js变量的方法
2016/02/05 PHP
JavaScript单元测试ABC
2012/04/12 Javascript
JavaScript window.document的属性、方法和事件小结
2012/10/24 Javascript
jcrop基本参数一览
2013/07/16 Javascript
封装好的一个万能检测表单的方法
2015/01/21 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
vue跨域解决方法
2017/10/15 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
Python制作Windows系统服务
2017/03/25 Python
python写一个md5解密器示例
2018/02/23 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
Python3常见函数range()用法详解
2019/12/30 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
会计工作决心书
2014/03/11 职场文书
企业文化理念标语
2014/06/10 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
2014年采购工作总结
2014/11/20 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书