HTML的<input>标签的size属性不起作用？

Question

我有一个指定了 size="15" 的元素。然而，渲染出来的元素具有 size 属性，它的宽度适合 25 个字符，如果 maxlength 更大，则可以容纳 30 左右？ maxlength 确实限制了字符数。

<input id="txtSearch" name="txtSearch" type="text" maxlength="25" size="15" />

- ChrisP

---

你正在为那个元素应用 CSS 吗？ - nairdaen

大小不是实际大小。如果您在这里玩：http://www.w3schools.com/tags/tryit.asp？filename=tryhtml_input_size 您可以看到大小为1实际上有许多像素宽度。 - glasnt

错误: "some" 而不是 "come"。 - nairdaen

Answer 1

等宽字体

我看到的最好结果是使用等宽字体：

<input type="text" size="4" style="font-family:monospace" />

在线示例：http://jsbin.com/epagi/edit 在Firefox、Chrome、Safari和IE中都可以很好地渲染。

如果您使用的是可变宽度字体，您需要使用脚本来更好地猜测预期宽度，但正如您所说，这并不是很优雅。

可变宽度字体

我试图为可变宽度字体制定一个合理简单的解决方案，但最终您需要看看它是否适合您的项目。

基本上我所做的是将特定输入的text-transform设置为uppercase，以获得一个半一致的期望值，用于填充文本时的宽度。然后我应用了一个指示该字段应该自动调整大小的类名，以及我们期望的字符数：sizeMe-4。使用jQuery，我收集了所有这些输入，并分割了这个类名，以获取期望的字符数。

我扩展了String对象以包括一个repeat方法，它允许我轻松创建期望大小的字符串，并将其添加到一个临时span元素中以获取宽度。然后将此宽度追加到初始输入元素中。然后丢弃该span元素。

在线演示：http://jsbin.com/epagi/2/edit

为了方便起见，这里是代码：

<input type="text" name="pin" maxlength="4" class="sizeMe-4" 
       style="text-transform:uppercase" />

--

String.prototype.repeat = function(num) {
    return new Array( num + 1 ).join( this );
}

$(function(){
  $(":input[class^='sizeMe']").each(function(){
    var size = Number($(this).attr("class").split("-").pop());
    var newW = $("<span>").text( "X".repeat(size) ).appendTo("body");
    $(this).width( $(newW).width() );
    $(newW).remove();
  });
});​

- Sampson

Answer 2

这可能取决于你使用的字体以及你正在测试的字符！

- Chris W. Rea

Answer 3

许多过时的错误信息 祝你好运

 size="100" to work in Chrome, not going to work

用于内联样式

style="width:20px"

- Tom Stickel

---

嗯，我一直在使用自制的 CSS 框架而不是我最喜欢的 Bootstrap，所以 size 没有起作用。也许还有其他人也遇到了同样的问题。 - Tom Stickel

Answer 4

我的问题是：

当使用一个带有"class=input-group"的外部div时，大小或内联样式将完全不起作用。如果可能，请删除此类"input-group"，它将起作用。

<div class="input-group">
    <input type="text" class="form-control" required style="width:20px">
</div>

- SHY