La hauteur de textarea ne correspond pas aux lignes de Firefox

L’atsortingbut de rows de textarea ne correspond pas au nombre de lignes dans Firefox. Par exemple:

  

Exemple: http://jsfiddle.net/Z7zXs/6/

Comment puis-je résoudre ce problème? La zone de texte ne devrait afficher que 4 lignes (au lieu de 5) pour les rows=4 .

Firefox ajoute toujours une ligne supplémentaire après le champ de texte. Si vous voulez qu’il ait une hauteur constante, utilisez CSS, par exemple:

 textarea { height: 5em; } 

http://jsfiddle.net/Z7zXs/7/

EDIT: Vous pouvez également utiliser l’extension CSS de @-moz-document url-prefix pour ne cibler que le navigateur Firefox. Exemple

 @-moz-document url-prefix() { textarea { height: 5em; } } 

Il y a beaucoup de réponses mais ne me convenait pas:

  • La règle CSS ( height: 5em; ) n’est pas flexible car elle remplace complètement l’atsortingbut de ligne
  • Et je ne veux pas utiliser JavaScript

Il y a un “bug”: TEXTAREA appliquant incorrectement ROWS = et COLS =

Alors voici ma solution:

FF ajoute de la hauteur au TextArea pour réserver une place aux barres de défilement.

Je n’ai pas besoin de barre de défilement horizontale, cela aide à corriger le problème: la règle CSS suivante peut être ajoutée à textarea:

 overflow-x: hidden; 

Voici l’exemple . Cela fonctionne même avec les rows=1 .

Vous pouvez corriger la hauteur en utilisant JavaScript (ou un code dur d’une hauteur de 4x1.2 = 4.8em ).

Exemple (JQuery), corrige le problème pour chaque zone de texte:

 $("textarea").each(function(){ var lineHeight = parseFloat($(this).css("line-height")); var lines = $(this).attr("rows")*1 || $(this).prop("rows")*1; $(this).css("height", lines*lineHeight); }); 

La valeur de la propriété CSS line-height est égale à la hauteur de chaque ligne (“row”). Ainsi, lorsque vous avez défini une row , ce code corrige la hauteur.

Lorsque l’atsortingbut rows n’est pas défini, le code examinera la valeur par défaut ( .prop("rows") ).

J’ai eu le même problème une fois et je ne pouvais pas utiliser CSS, donc JavaScript est le seul moyen: Voici les moyens Mootools et jQuery pour faire cela:

Mootools:

 window.addEvent('domready', function() { if (Browser.firefox) { $$('textarea[rows]').each(function(el) { if (!el.resortingeve('ffRowsFixed')) { var rows = el.get('rows').toInt(); if (rows > 1) el.set('rows', (rows - 1)); el.store('ffRowsFixed', true); } }); } }); 

jQuery:

 $(document).ready(function() { if ($.browser.mozilla) { $('textarea[rows]').each(function(i, el) { if (!$(el).data('ffRowsFixed')) { var rows = parseInt($(el).attr('rows')); if (rows > 1) { $(el).attr('rows', (rows - 1)); } $(el).data('ffRowsFixed', true); } }); } }); 

Il vérifiera si le navigateur est Firefox, si c’est le cas, il vérifiera si les lignes ont déjà été corrigées, sinon elles seront corrigées.