Question

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

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

Answer 1

Monospaced Font

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

<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

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

Answer 3

很多过时的不良信息祝你好运

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

用于内联样式

style="width:20px"

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

3 个答案:

Monospaced Font

可变宽度字体