La hauteur de la zone de texte ne correspond pas aux rangées dans Firefox

Question

L'élément du textarea rows ne correspond pas au nombre de lignes dans Firefox. Par exemple :

<textarea rows=4 cols=40>
1
2
3
4
this line is visible in FF
</textarea>

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 éléments suivants rows=4 .

Answer 1

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

• Règle CSS ( height: 5em; ) n'est pas assez flexible parce qu'il remplace complètement l'option rows attribut
• Et je ne veux pas utiliser JavaScript

Il y a un "bug" : TEXTAREA applique incorrectement ROWS= et COLS=.

Voici donc ma solution :

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

Je n'ai pas besoin de la barre de défilement horizontale, ce qui permet de résoudre le problème : la règle css suivante peut être ajoutée au textarea :

overflow-x: hidden;

Voici un exemple . Il fonctionne même avec rows=1 .

Answer 2

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

textarea {
    height: 5em;
}

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

EDITAR: Vous pouvez également utiliser le @-moz-document url-prefix Extension CSS pour cibler uniquement le navigateur Firefox. Exemple

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

Answer 3

Vous pouvez fixer la hauteur en utilisant JavaScript (ou coder en dur une hauteur de 4x1.2 = 4.8em ).

Exemple (JQuery), corriger le problème pour chaque textarea :

$("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 line-height La propriété CSS est égale à la hauteur de chaque ligne ("row"). Ainsi, lorsque vous avez défini row ce code va corriger la hauteur.

Lorsque le rows n'est pas défini, le code prendra en compte la valeur par défaut ( .prop("rows") ).

Answer 4

J'ai eu le même problème une fois et je ne pouvais pas utiliser les CSS, donc JavaScript est le seul moyen : Voici les façons de faire de Mootools et de jQuery :

Mootools :

window.addEvent('domready', function() {
if (Browser.firefox) {
    $$('textarea[rows]').each(function(el) {
        if (!el.retrieve('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, et si non elles seront corrigées.