HTML 大小属性不工作？(HTML <input> size attribute

我有以下元件，其指定了大小=“15”。然而所呈现的元素，它具有大小属性，具有配合25个字符并且可以装入30左右，如果最大长度是大的宽度？ MAXLENGTH确实限制字符＃。

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

Answer 1:

这可能取决于你所使用的字体，什么字符您与测试！

Answer 2:

等宽字体

我见过的最好的结果通过使用等宽字体来了：

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

在线例子： http://jsbin.com/epagi/edit在火狐，Chrome，Safari和IE渲染整齐。

如果您使用的是可变宽度的字体，你将不得不使用脚本来获得更好的猜测，有什么预期的宽度会是这样，但正如你所说，这是不是很优雅。

可变宽度字体

我想工作了可变宽度字体的合理的，简单的解决方案，但最终你需要看它是否适合你的项目或没有。

基本上，我所做的就是设置text-transform的特定输入uppercase来获得以文字填写有多宽的东西将是一个半一致预期。然后我应用了指定的字段应该是自动调整大小一个类名，而我们有多少个字符期待： sizeMe-4 使用jQuery，我收集了所有的这些投入，并拆分这个类名来获得预期的字符数。

我延长了String对象包含重复的方法，让我轻松地创建预期大小的字符串，并将其添加到一个特设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();
  });
});

Answer 3:

过时的不良信息祝你好运地块越来越

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

对于内嵌样式

style="width:20px"