编程 Javascript

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程序设计有所帮助。

- Author -

彼岸花在开

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Dom加载让图片加载完再执行的脚本代码

May 15 Javascript

input按钮的事件处理大全

Dec 10 Javascript

js 中将多个逗号替换为一个逗号的代码

Jun 07 Javascript

在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南

Dec 29 Javascript

jquery实现隐藏在左侧的弹性弹出菜单效果

Sep 18 Javascript

JavaScript实现点击按钮就复制当前网址

Dec 14 Javascript

Bootstrap中定制LESS-颜色及导航条(推荐)

Nov 21 Javascript

最常用的jQuery表单验证(简单)

May 23 jQuery

react 创建单例组件的方法

Apr 26 Javascript

vue和webpack项目构建过程常用的npm命令详解

Jun 15 Javascript

刷新页面后让控制台的js代码继续执行

Sep 20 Javascript

VUE 单页面使用 echart 窗口变化时的用法

Jul 30 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