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/

如何解决此问题？ textarea应该只为rows=4显示4行（而不是5行）。

Answer 1

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

CSS规则（height: 5em;）不灵活，因为它完全覆盖rows属性
我不想使用JavaScript

有一个＆＃34;错误＆＃34;：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的问题：

$("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”）。因此，当您定义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，如果是，它将检查行是否已经被修正，如果不是，它们将被修复。

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

4 个答案: