jquery는 텍스트 상자 텍스트 영역 적응형 height_javascript 기술을 구현합니다.-JS 튜토리얼-php.cn

jquery는 텍스트 상자 텍스트 영역 적응형 height_javascript 기술을 구현합니다.

WBOY

풀어 주다： 2016-05-16 15:11:24

원래의

1421명이 탐색했습니다.

브라우저의 기본 텍스트 상자는 콘텐츠 증가에 따라 높이를 늘릴 수 없습니다. 스크롤 막대를 사용하여 높이를 고정할 수만 있지만 호환되도록 하기 위해 여러 가지 방법을 시도해 보았지만, 드디어 호환성이 좋은 방법을 찾았습니다:

<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 &#63; _minHeight :h > _maxHeight &#63; _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 프로그래밍을 배우는 모든 분들께 도움이 되기를 바랍니다.