问题 HTML size属性不起作用?


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

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

2850
2017-07-03 01:44


起源

你是否将CSS应用于该元素? - nairdaen
尺寸不是实际尺寸。如果你在这里玩: w3schools.com/tags/tryit.asp?filename=tryhtml_input_size 您可以看到1的大小实际上是多少像素的宽度。 - glasnt
错误:“一些”而不是“来” - nairdaen


答案:


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


7
2017-07-03 01:46





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();
  });
});​

9
2017-07-03 01:48



啊,谢谢你:-) - Ray


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

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

适用于内联风格

style="width:20px"

0
2017-10-08 16:25



好吧,我一直在使用自己开发的CSS框架而不是我最喜欢的bootstrap size 没用。也许其他人在同一条船上 - Tom Stickel