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

Posted 2023-05-07

【中文标题】textarea 的高度与 Firefox 中的行不匹配

【英文标题】：Height of textarea does not match the rows in Firefox

【发布时间】：2011-12-03 12:02:07

【问题描述】：

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 行）。

【问题讨论】：

我是否理解“不可见”是指用户必须向下滚动？如果是这样，只需更改'rows = 5'。否则请解释“不可见”是什么意思。

@Martin 我的意思是你提到的。但根据 w3s，该行不应出现：设置文本区域的高度（以行为单位）

实际上，W3C 声明 »此属性指定可见文本行的数量。« 不知道 w3s 应该是什么或引用来自哪里。不过内容相同。

w3schools.com/tags/att_textarea_rows.asp

W3Schools 是不可靠的资源。 w3fools.com

【参考方案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。

【讨论】：

设置溢出非常适合我，谢谢！我认为 FF 为滚动条腾出空间解释了这种差异。

对我来说，我还必须将 line-height 和 font-size 设置为 1em，然后所有 3 个浏览器看起来都一样。

.. 和 overflow-y: hidden; 为我“修复”了 Firefox，但 Chrome 似乎为垂直滚动条保留了一个空间。

【参考方案2】：

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

textarea 
    height: 5em;

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

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

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

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

【讨论】：

在所需行数 = 1 的情况下不修复 textarea。

$.browser 自 jQuery 1.9.0 以来已被删除，这使开发人员的生活更加复杂。