web-dev-qa-db-fra.com

La hauteur de textarea ne correspond pas aux lignes dans Firefox

L'attribut rows de la zone de texte 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 doit afficher que 4 lignes (au lieu de 5) pour rows=4.

htmlfirefoxtextarea
39
user669677

Firefox ajoute toujours une ligne supplémentaire après le champ de texte. Si vous voulez que sa hauteur soit constante, utilisez CSS, par exemple:

textarea {
    height: 5em;
}

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

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

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

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'attribut rows
  • Et je ne veux pas utiliser JavaScript

Il y a un "bug": TEXTAREA appliquant de manière incorrecte ROWS = et COLS =

Alors voici ma solution:

(FF ajoute de la hauteur à la zone de texte pour réserver une place aux barres de défilement.

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

overflow-x: hidden;

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

60
Serg

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

Exemple (JQuery), corrigez 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 ("rangée"). Ainsi, lorsque vous aurez défini row, ce code fixera la hauteur.

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

2
Rob W

J'ai eu le même problème une fois et je ne pouvais pas utiliser de CSS, donc JavaScript est le seul moyen: voici les façons de faire cela: Mootools et 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 ce n'est pas le cas, elles seront corrigées.

0
Stephan Wagner