Высота textarea не соответствует строкам в Firefox.

Атрибут textarea rows не соответствует количеству строк в Firefox. Например:

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

Пример: http://jsfiddle.net/Z7zXs/6/

Как я могу исправить эту проблему? Текстовое поле должно отображать только 4 строки (вместо 5) для rows=4.

Ответы

Ответ 1

Firefox всегда добавляет дополнительную строку после текстового поля. Если вы хотите иметь постоянную высоту, используйте CSS, например:

textarea {
    height: 5em;
}

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

EDIT: Вы также можете использовать расширение @-moz-document url-prefix для таргетинга только на браузер Firefox. Пример

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

Ответ 2

Есть много ответов, но не подходит для меня:

  • Правило CSS (height: 5em;) не является гибким enoutgh, потому что оно полностью переопределяет атрибут rows
  • И я не хочу использовать JavaScript

Существует "ошибка": TEXTAREA неправильно применяя ROWS = и COLS =

Итак, вот мое решение:

FF добавляет высоту в TextArea для резервирования места для полос прокрутки.

Мне не нужна горизонтальная полоса прокрутки, поэтому она помогает в устранении проблемы: после правила CSS можно добавить в textarea:

overflow-x: hidden;

Вот пример. Он работает даже с rows=1.

Ответ 3

Вы можете исправить высоту с помощью JavaScript (или жесткого кода высоты 4x1.2 = 4.8em).

Пример (JQuery), исправить проблему для каждого текстового поля:

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

Значение свойства line-height CSS равно высоте каждой строки ( "строка" ). Итак, когда вы определили row, этот код зафиксирует высоту.

Если атрибут rows не установлен, код будет выглядеть по умолчанию (.prop("rows")).

Ответ 4

У меня была одна и та же проблема один раз, и я не мог использовать CSS, поэтому JavaScript - единственный способ: вот способы Mootools и 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);
         }
     });
}
});

Он будет проверять, является ли браузер firefox, если он есть, он проверяет, исправлены ли строки уже, и если они не будут исправлены.