信鸽网

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

  作者：bea

浏览器中默认的文本框是不能根据内容的增多变高，只能固定高度有滚动条，体验不是很好，找了很多方法兼容都不行，总算找到个兼容良好的方法： <body> <textarea id="textarea3" style="overflow-y:hidden; height:20px;resize: none"> </textarea> <script type="text/javascript" src="js

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




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




有用  |  无用

猜你喜欢

您可能感兴趣的文章: