Firefox 中的单行文本区域拒绝显示垂直滚动条答案

【问题标题】：One-row textarea in Firefox refuses to show vertical scrollbarFirefox 中的单行文本区域拒绝显示垂直滚动条
【发布时间】：2009-06-11 13:49:07
【问题描述】：

我已经发现 Firefox 的 textareas 大小有问题 - 它总是在您的 rows 和 cols 设置中添加一个。但我决定忽略这一点。问题是 Firefox 也拒绝放入垂直滚动条，即使我在框中输入了一个该死的短篇小说。

我做错了什么（即无效）吗？有解决办法吗？

<textarea rows="1" cols="35" name="Cmnt1"></textarea>

（我想使用单行 textarea 而不是 input type=text 正是因为后者不提供滚动条。所有其他浏览器即使在单行 textarea 上也会为您提供垂直滚动条。）

请注意，此字段几乎总是只包含一行文本，但它需要接受更多“以防万一”。文本输入字段不太令人满意（总是隐藏了溢出。在所有其他浏览器中，单行文本区域完全按照我的意愿工作。我强烈不同意我想要的是可用性问题。不幸的是，它在 Firefox 中的行为方式是可用性问题。

编辑：原来我安装的 Firefox 存在错误。：/

【问题讨论】：

这听起来像是一场可用性噩梦。除了你“想要”它之外，你的理由是什么？
你能链接到这个行为的一个活生生的例子吗？我自己无法复制它。
使用 css 属性 height 和 width 来准确调整 textareas 的大小。保留行/列作为后备。
为什么你认为这是一个可用性噩梦？（嗯，在 Firefox 中是这样，但这不是我的错。）你想让我做什么呢？
@Martha：多行文本字段仅显示一行使得编辑甚至查看输入的文本都非常困难。这会导致糟糕的用户体验。如果您希望用户不要输入更多文本，那么您应该使用单行文本字段，否则至少显示 3 行（许多可用性指南认为此值是绝对最小值）。举个例子，输入此评论的字段显示 4 行。

标签： html firefox textarea

【解决方案1】：

我知道这真的很老了，但我有一个类似的问题，并在此过程中找到了您问题的答案。在 Firefox 中使用 jsfiddle (http://jsfiddle.net/z8btg/1/) 显示，只有在有空间同时显示向上和向下箭头图形时，垂直滚动条才可见。（单击调整大小的小图标，使其变小/变大。）对我来说，最佳位置是 34 像素。

我正在尝试做的事情：我需要 textarea 是一行，直到 textarea 被聚焦，然后我将其更改为更大的（弹出式）textarea。

【讨论】：

【解决方案2】：

尝试将 overflow css 属性设置为“滚动”。例如：

<textarea rows="1" cols="35" name="Cmnt1" style="overflow: scroll;"></textarea>

编辑：对不起，应该是overflow-y: scroll。

【讨论】：

这没有帮助。 “溢出：自动”也没有。 “滚动”会让水平滚动条一直出现，“自动”没有效果。这两种设置都不会使垂直滚动条出现。
“overflow-y:scroll”怎么样？
看来我不是唯一一个看到与你不同的行为的人。 “它非常适合我，手动粘贴或键入。- Tyler Rash”使用“overflow-y:scroll”会导致在我的浏览器中的文本区域中始终显示一个垂直且只有一个垂直滚动条，除非我手动设置高度与 CSS。我不确定我们的浏览器之间有什么区别，但我不欣赏你“不太礼貌”的 cmets。
好的，看来问题出在我安装的 Firefox 上。我刚刚在另一台计算机上安装了 FF，并得到了可爱的垂直滚动条。感谢您的帮助。

【解决方案3】：

关注文本区域，按回车键。

顺便说一句，这听起来是个很糟糕的主意。

【讨论】：

什么听起来很糟糕？并且点击返回并没有帮助 - 就像我说的那样，您可以在框中输入（或者更确切地说，复制和粘贴）整个短篇小说，Firefox 仍然会拒绝显示垂直滚动条。（如果你输入一个很长的单词，它会显示水平滚动条，但仍然没有垂直滚动条。）
你是说在 Firefox 中，你有一个 rows=1 的 textarea，你得到一个 vertical 滚动条？什么版本的火狐？？

【解决方案4】：

我用这样的东西向访问者展示了一个 html 链接，需要适合设计和可用性对于它的预期功能来说很好：

根据需要设置宽度（% 或 px）。

点击后将突出显示以进行复制。

【讨论】：

【解决方案5】：

尝试使用 CSS 将 textarea 的高度设置为 1em（这意味着一个行高单位）并将行设置为更高的值。

【讨论】：

这不起作用，或者说它导致与使用 rows="1" 完全相同的行为。我刚试了一下，2.7em以下的任何高度设置都没有出现垂直滚动条。
有趣 - 我想这就是你的答案。如果您认为这是一个 FF 错误，请向他们报告，以便他们知道。 bugzilla.mozilla.org

【解决方案6】：

我使用的是 Firefox 2.0。 textarea 上的滚动条直到 textarea 的高度为 32px（大约为两行文本）才会显示。如果高度小于该高度，滚动条就会消失——可能是因为没有足够的空间来显示箭头图标。

【讨论】：