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

前端技术 2023/09/07 JavaScript

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

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

本文地址：https://www.stayed.cn/item/19727

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案