HTML <input> 大小属性不起作用？

Question

我有以下指定 size="15"的元素。但是，具有 size 属性的呈现元素的宽度适合 25 个字符，如果 maxlength 更大，则可以容纳 30 个左右？ Maxlength 确实限制了字符数。

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

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 元素以获得宽度。然后将该宽度追溯应用到初始输入元素。然后丢弃跨度。

在线演示: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();
  });
});​