textarea 的高度与 Firefox 中的行不匹配

Question

textarea 的rows 属性与Firefox 中的行数不匹配。例如：

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

示例：http://jsfiddle.net/Z7zXs/6/

我该如何解决这个问题？对于rows=4，textarea 应该只显示 4 行（而不是 5 行）。

Answer 1

有很多答案，但不适合我：

• CSS 规则 (height: 5em;) 不够灵活，因为它完全覆盖了rows 属性
• 我不想使用 JavaScript

有一个“bug”：TEXTAREA incorrectly applying ROWS= and COLS=

所以这是我的解决方案：

FF 为 TextArea 增加高度以保留滚动条的位置。

我不需要水平滚动条，因此它有助于解决问题：可以将以下 css 规则添加到 textarea：

overflow-x: hidden;

Here is example。它甚至适用于rows=1。

Answer 2

Firefox 总是在文本字段之后添加一个额外的行。如果您希望它具有恒定的高度，请使用 CSS，例如：

textarea {
    height: 5em;
}

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

编辑： 您还可以使用 @-moz-document url-prefix CSS 扩展来仅针对 Firefox 浏览器。示例

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

Answer 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")）。

Answer 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，如果是，它会检查行是否已经被更正，如果没有，它们会被修复。