Travailler le plugin de champ de texte de hauteur automatique jQuery?

Question

Est-ce que quelqu'un connaît un plugin jQuery réel et fonctionnel qui peut correctement agrandir la hauteur d'un textarea lorsque du texte y est ajouté?

J'ai essayé à la fois les plugins autogrow et growfield et aucun ne semble bien fonctionner. Les deux ont des problèmes où ils ne grandissent pas correctement et/ou ignorent parfois leurs hauteurs maximales. Je suis en train de tester avec FF 3.5 sur OSX.

Il y en avait un troisième qui est apparu dans la recherche Google mais la page de démonstration ne fonctionnait même pas, donc je n'ai pas pris la peine de l'essayer.

Answer 1

Je pense que cette réponse sur SA devrait vous aider Pas complètement en JQuery, mais le code est assez petit pour être implémenté par vous-même.

Answer 2

Lorsque je travaillais sur mon projet actuel, j'ai eu un problème similaire de ne pas pouvoir trouver un plugin de zone de texte en expansion solide et fiable. J'ai fini par opter pour growfield, mais je ne peux pas dire que je en suis trop satisfait.

Un problème auquel j'ai pu remédier était que growfield (tout comme presque tous les autres plugins) insistait pour ajouter une ligne supplémentaire à la zone de texte en tout temps. C'est un code de développement brut, et actuellement ne prend en charge que Safari et Firefox, mais voici un peu de code que j'ai ajouté à la fin de la fonction getDummyHeight() de growfield:

if ($.browser.safari) return h-sr.lh*2+sr.pt+sr.pb;
if ($.browser.mozilla) return h-sr.lh*2+sr.pt*2+sr.pb+5;

Cela utilise la détection du navigateur (ce qui est une mauvaise pratique) et dépend probablement de notre mise en page et de notre CSS, mais vous pourriez être en mesure de faire quelques ajustements pour le faire fonctionner correctement dans votre design.

En cas de doute (growfield est un peu cryptique), h fait référence à la hauteur de la zone de texte, sr.lh fait référence à la hauteur de ligne, sr.pt fait référence au padding supérieur et sr.pb fait référence au padding inférieur. La liste complète des variables se trouve dans la fonction prepareSizeRelated().

Answer 3

Tout comme vous, j'ai essayé de nombreuses solutions jQuery, mais j'ai fini par revenir à du bon vieux javascript à chaque fois. En supposant que jQuery ne soit pas une exigence absolue pour vous, vous pourriez utiliser quelque chose comme ce qui suit (devra ajuster xxx pour convenir à votre zone de texte particulière, devrait être ~1.3) :

function resizeTextarea( textarea ) {
  currentRows = textarea.value.split('\n');
  newRows = 1;
  minRows = 4;

  for( i=0; i < currentRows.length; i++ ) {
    if( currentRows[i].length > textarea.cols ) {
      newRows += Math.ceil( currentRows[i].length / textarea.cols - xxx );
    }
  }

  newRows += currentRows.length;

  if( newRows != textarea.rows ) {
    textarea.rows = newRows;
  }
}

Answer 4

Eh bien, maintenant il y en a un.

Ce plugin s'appelle: Autosize,

et il est réalisé par Jack Moore

Découvrez-le ici.

(Je sais que cette question date de 2009, mais cela pourrait aider les lecteurs futurs)