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; }
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:
height: 5em;
) n’est pas flexible car elle remplace complètement l’atsortingbut de ligne 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.