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

Question

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

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

Answer 1

Monospaced字体

我见过的最好的结果是使用等宽字体:

<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方法,该方法允许我轻松创建预期大小的字符串,并将其添加到ad-hoc 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 2

它可能取决于您使用的字体,以及您正在测试的字符!