10

我正在努力理解textarea 和输入文本的cols和属性的行为。size虽然它应该是直截了当的，但如果 cols 和 size 值相同，我无法弄清楚为什么它们有不同的宽度？

根据文档，这两个属性都应该调整元素的大小，以便给定数量的字符可以放在里面：

... size属性指定输入元素的可见宽度（以字符为单位）。[来源-w3schools]

注意cols和 rows 属性 (...) 指定了多少列高和多少行宽来构成文本区域。这些值以字符为单位 。[来源 - w3]

但是，如果我尝试为两个元素分配相同的值，它们最终会具有不同的宽度。输入字段有点太小，无法容纳给定数量的字符和文本区域 - 太宽。最重要的是，两者都有不同的宽度。

例如：

<input type="text" size=40>
<textarea cols="40"></textarea>

产生：

textarea cols 输入文本大小

见这里 - http://jsfiddle.net/yjERR/

我在 Chrome 29 和 Firefox 24 中都试过了。

我知道宽度取决于字体样式，但是两个元素不应该仍然具有相同的宽度吗？是内部元素边距还是其他原因导致了这种差异？

更新

似乎这两个元素具有不同的字体样式，但是分配相同的 font-family 和 font-size 仍然会产生不同的宽度：

在此处输入图像描述

更新的小提琴

4

3 回答 3

7

“字符的可见宽度”是一个模糊的表达，因为在大多数字体中，字符的宽度是不同的。因此，除非您使用等宽字体，否则您不能期望获得一个可容纳确切字符数的控件。

有两个基本的东西使宽度input和textarea不同。首先，默认字体不同：在大多数浏览器中，等宽字体用于textarea，无衬线字体用于。input这会导致不同的宽度，即使对于相同的字体大小也是如此。其次，一个textarea小部件在右侧包含一个小区域，在需要时将用于垂直滚动条；实际上，该元素overflow: auto默认具有。您可以使用 删除它overflow: hidden，但是当用户输入更多适合该区域的行时，将会出现一个主要问题。

如果你真的想让元素同样宽（我认为你不应该），那么你可以明确设置字体和宽度，例如

input, textarea{  
    font-family: Arial, sans-serif;
    font-size: 100%;
    width: 26em; /* fallback for the next one, for browsers not recognizing ch */
    width: 40ch; /* sets the width to 40 times the width of the digit “0” */
}
于 2013-09-20T06:12:45.210 回答
1

将两个元素设置为相同font-family，它将正确显示。

这是一个示例jsFiddle

于 2013-09-20T03:01:41.013 回答
1

如果重要的是让它们轻松且精确地获得同样的宽度，则可以使用行值为 1 的 textarea 而不是输入文件。

毫无疑问，回答有点晚了，但它不会花费任何东西......

于 2018-08-09T21:40:21.190 回答