jQuery 자동 크기 조정 기능으로 인해 브라우저에서 점프가 발생합니다.

Question

저는이 텍스트 확장기가 마음에 들지 않습니다. 크기 조정을 계산할 때 다른 사람이하는 것처럼 때때로 키보드를 잠그지 않기 때문입니다. 그러나 브라우저를 사용하면 때때로 크기가 조정될 때 브라우저의 맨 위로 이동합니다 (스크롤 한 페이지의 지점에 머물러 있기보다는). 이 문제를 해결하는 방법에 대한 제안 사항이 있으십니까?

/** 
* TextAreaExpander plugin for jQuery 
* v1.0 
* Expands or contracts a textarea height depending on the 
* quatity of content entered by the user in the box. 
* 
* By Craig Buckler, Optimalworks.net 
* 
* As featured on SitePoint.com: 
* http://www.sitepoint.com/blogs/2009/07/29/build-auto-expanding-textarea-1/ 
* 
* Please use as you wish at your own risk. 
*/ 

/** 
* Usage: 
* 
* From JavaScript, use: 
*  $(<node>).TextAreaExpander(<minHeight>, <maxHeight>); 
*  where: 
*  <node> is the DOM node selector, e.g. "textarea" 
*  <minHeight> is the minimum textarea height in pixels (optional) 
*  <maxHeight> is the maximum textarea height in pixels (optional) 
* 
* Alternatively, in you HTML: 
*  Assign a class of "expand" to any <textarea> tag. 
*  e.g. <textarea name="textarea1" rows="3" cols="40" class="expand"></textarea> 
* 
*  Or assign a class of "expandMIN-MAX" to set the <textarea> minimum and maximum height. 
*  e.g. <textarea name="textarea1" rows="3" cols="40" class="expand50-200"></textarea> 
*  The textarea will use an appropriate height between 50 and 200 pixels. 
*/ 

(function($) { 

    // jQuery plugin definition 
    $.fn.TextAreaExpander = function(minHeight, maxHeight) { 

     var hCheck = !($.browser.msie || $.browser.opera); 

     // resize a textarea 
     function ResizeTextarea(e) { 

      // event or initialize element? 
      e = e.target || e; 

      // find content length and box width 
      var vlen = e.value.length, ewidth = e.offsetWidth; 
      if (vlen != e.valLength || ewidth != e.boxWidth) { 

       if (hCheck && (vlen < e.valLength || ewidth != e.boxWidth)) e.style.height = "0px"; 
       var h = Math.max(e.expandMin, Math.min(e.scrollHeight, e.expandMax)); 

       e.style.overflow = (e.scrollHeight > h ? "auto" : "hidden"); 
       e.style.height = h + "px"; 

       e.valLength = vlen; 
       e.boxWidth = ewidth; 
      } 

      return true; 
     }; 

     // initialize 
     this.each(function() { 

      // is a textarea? 
      if (this.nodeName.toLowerCase() != "textarea") return; 

      // set height restrictions 
      var p = this.className.match(/expand(\d+)\-*(\d+)*/i); 
      this.expandMin = minHeight || (p ? parseInt('0'+p[1], 10) : 0); 
      this.expandMax = maxHeight || (p ? parseInt('0'+p[2], 10) : 99999); 

      // initial resize 
      ResizeTextarea(this); 

      // zero vertical padding and add events 
      if (!this.Initialized) { 
       this.Initialized = true; 
       $(this).css("padding-top", 0).css("padding-bottom", 0); 
       $(this).bind("keyup", ResizeTextarea).bind("focus", ResizeTextarea); 
      } 
     }); 

     return this; 
    }; 

})(jQuery); 

Answer 1

질문에 답할 수없는 한 코드 검토는 어떻습니까?

• 설명서에도 불구하고 expand 클래스 만 지정하면 플러그인이 적용되지 않습니다.
• JavaScript에서 함수, 메서드 및 속성 이름을 작은 문자로 시작하는 것은 사용자 지정입니다.
• 브라우저 스니핑은 사실상 항상 잘못되었습니다. 어떤 문제를 해결하려고합니까? 또한 IE (IE9 포함)의 모든 버전과 Opera에 실제로 적용됩니까? 표준 모드에서도?
• DOM 요소 참조가 기본 JavaScript 객체가 아니므로 사용자 정의 속성을 지원하지 않을 수 있으므로 DOM 요소 참조에 사용자 정의 속성을 만드는 것이 좋지 않은 것으로 간주됩니다. 또한 다른 플러그인이 동일한 속성 이름을 사용하는 위험이 있습니다. 대신 jQuery의 .data() 메서드를 사용하고 더 많은 고유 한 속성 이름을 선택하십시오 (예 : 접두어 포함).
• 두 매개 변수에 대해 동일한 매개 변수를 사용하는 데 큰 팬이 아닙니다. 최소한 e보다 더 좋은 이름을 지정하십시오 (예 : eventOrTarget).