La fonction de redimensionnement automatique jQuery provoque un saut dans le navigateur

Question

J'aime cet expandeur de texte car il ne bloque pas le clavier de temps en temps comme d'autres semblent le faire car ils calculent le redimensionnement. Cependant, quand je l'utilise, le navigateur saute parfois en haut de la page quand il redimensionne (plutôt que de rester sur le point de la page vers laquelle j'ai défilé). Des suggestions sur la façon de résoudre ce problème?

/** 
* 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

Tant que je ne peux pas répondre à la question, que diriez-vous d'une revue de code?

• Le plugin ne s'applique pas si vous affectez seulement la classe expand, malgré la documentation.
• Il est coutume en JavaScript d'avoir des fonctions, méthodes et noms de propriétés commençant par une petite lettre.
• Le reniflage du navigateur est pratiquement toujours incorrect. Quel problème essayez-vous de résoudre avec cela, et s'applique-t-il vraiment à toutes les versions de IE (même IE9) et Opera? Et même en mode Standards?
• Il est considéré comme incorrect de créer des propriétés personnalisées sur les références d'éléments DOM, car elles ne sont pas des objets JavaScript natifs et ne prennent donc pas en charge les propriétés personnalisées. Il y a aussi le danger que d'autres plugins utilisent les mêmes noms de propriétés. Utilisez plutôt la méthode .data() de jQuery et choisissez d'autres noms de propriétés uniques, par exemple avec un préfixe.
• Je ne suis pas un grand fan de l'utilisation du même paramètre pour deux choses différentes. Au moins, attribuez un meilleur nom au paramètre que e, par exemple eventOrTarget.