it-swarm.com.de

Die Höhe des Textbereichs stimmt nicht mit den Zeilen in Firefox überein

Das rows-Attribut des Textbereichs stimmt nicht mit der Zeilenanzahl in Firefox überein. Zum Beispiel:

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

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

Wie kann ich dieses Problem beheben? Der Textbereich sollte für rows=4 nur 4 Zeilen (anstelle von 5) anzeigen.

39
user669677

Firefox fügt immer eine zusätzliche Zeile nach dem Textfeld ein. Wenn Sie eine konstante Höhe haben möchten, verwenden Sie CSS, z.

textarea {
    height: 5em;
}

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

EDIT: Sie können auch die Erweiterung @-moz-document url-prefix / verwenden, um nur den Firefox-Browser als Ziel festzulegen. Beispiel

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

Es gibt viele Antworten, aber für mich nicht geeignet:

  • Die CSS-Regel (height: 5em;) ist nicht flexibel genug, da sie das rows-Attribut vollständig überschreibt
  • Und ich möchte kein JavaScript verwenden

Es gibt einen "Fehler": TEXTAREA wendet falsch ROWS = und COLS = an

Hier ist meine Lösung:

FF erhöht die Höhe der TextArea um Platz für Bildlaufleisten.

Ich brauche keine horizontale Bildlaufleiste, daher hilft es bei der Behebung des Problems: Die folgende CSS-Regel kann zur Textfläche hinzugefügt werden:

overflow-x: hidden;

Hier ist ein Beispiel . Es funktioniert auch mit rows=1

60
Serg

Sie können die Höhe mithilfe von JavaScript festlegen (oder eine Höhe von 4x1.2 = 4.8em).

Beispiel (JQuery), beheben Sie das Problem für jeden Textbereich:

$("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);
});

Der Wert der CSS-Eigenschaft line-height entspricht der Höhe jeder Zeile ("Zeile"). Wenn Sie also row definiert haben, wird die Höhe durch diesen Code festgelegt.

Wenn das Attribut rows nicht festgelegt ist, wird der Standardwert (.prop("rows")) des Codes überprüft.

2
Rob W

Ich hatte das gleiche Problem einmal und konnte kein CSS verwenden. Daher ist JavaScript die einzige Möglichkeit: Hier sind die Möglichkeiten von Mootools und 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);
         }
     });
}
});

Es wird geprüft, ob der Browser Firefox ist. Wenn dies der Fall ist, wird überprüft, ob die Zeilen bereits korrigiert wurden. Wenn nicht, werden sie behoben.

0
Stephan Wagner