> 웹 프론트엔드 > JS 튜토리얼 > Jquery는 텍스트 content_jquery에 따라 텍스트 영역 적응형 높이를 구현합니다.

Jquery는 텍스트 content_jquery에 따라 텍스트 영역 적응형 높이를 구현합니다.

WBOY
풀어 주다: 2016-05-16 16:05:57
원래의
1299명이 탐색했습니다.

Weibo를 플레이할 때 알 수 있는 한 가지 세부 사항은 전달 및 댓글 작성 시 Sina Weibo 또는 Tencent Weibo에서 제공하는 기본 텍스트 상자의 높이가 그다지 높지 않다는 것입니다. 이는 레이아웃 제한 때문일 수 있습니다. 사용자는 일반적으로 짧은 문장에만 다시 게시하거나 댓글을 달 수 있다는 사실과 관련이 있습니다. 하지만 두 줄 이상의 텍스트를 입력하면 텍스트 상자의 높이가 자동으로 높아지므로 사용자가 모든 텍스트를 볼 수 있도록 경험이 크게 향상됩니다. 텍스트 상자의 스크롤 막대를 끌 필요가 없습니다.

autoTextarea.js

(function($){
  $.fn.autoTextarea = function(options) {
    var defaults={
      maxHeight:null,
      minHeight:$(this).height()
    };
    var opts = $.extend({},defaults,options);
    return $(this).each(function() {
      $(this).bind("paste cut keydown keyup focus blur",function(){
        var height,style=this.style;
        this.style.height = opts.minHeight + 'px';
        if (this.scrollHeight > opts.minHeight) {
          if (opts.maxHeight && this.scrollHeight > opts.maxHeight) {
            height = opts.maxHeight;
            style.overflowY = 'scroll';
          } else {
            height = this.scrollHeight;
            style.overflowY = 'hidden';
          }
          style.height = height + 'px';
        }
      });
    });
  };
})(jQuery);
로그인 후 복사

demo.js

$(".doctable textarea").autoTextarea({
  maxHeight:400,
  minHeight:100
});
로그인 후 복사

이상 내용이 이 글의 전체 내용입니다. jQuery를 배우는 모든 분들에게 도움이 되었으면 좋겠습니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿