HTML <input> size 属性不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1077483/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML <input> size attribute not working?
提问by ChrisP
I have the following element which specifies the size="15". However the rendered element, which has the size attribute, has a width that fits 25 characters and could fit 30 or so if maxlength was greater? Maxlength does limit the # of characters.
我有以下元素指定 size="15"。但是，具有 size 属性的渲染元素的宽度可以容纳 25 个字符，如果 maxlength 更大，则可以容纳 30 个左右？Maxlength 确实限制了字符数。
<input id="txtSearch" name="txtSearch" type="text" maxlength="25" size="15" />
采纳答案by Chris W. Rea
It probably depends on the font you are using, and what character you are testing with!
这可能取决于您使用的字体以及您正在测试的字符！
回答by Sampson
Monospaced Font
等宽字体
The best results I've seen came through using a monospace font:
我见过的最好的结果是使用等宽字体：
<input type="text" size="4" style="font-family:monospace" />
Online Example: http://jsbin.com/epagi/editRendered neatly in Firefox, Chrome, Safari, and IE.
在线示例：http: //jsbin.com/epagi/edit在 Firefox、Chrome、Safari 和 IE 中整齐地呈现。
If you're using a variable-width font, you would have to use scripting to get a better guess as to what the expected width would be, but as you said, this isn't very elegant.
如果您使用的是可变宽度字体，则必须使用脚本来更好地猜测预期宽度是多少，但正如您所说，这不是很优雅。
Variable-Width Font
可变宽度字体
I tried to work up a reasonable-simple solution for variable-width fonts, but ultimately you will need to see if it fits your project or not.
我试图为可变宽度字体制定一个合理简单的解决方案，但最终你需要看看它是否适合你的项目。
Basically what I did was set the text-transformof particular inputs to uppercaseto get a semi-consistent expectation for how wide something will bewhen filled out with text. I then applied a classname that indicated the field should be auto-sized, and how many chars we're expecting: sizeMe-4. Using jQuery, I collected all of these inputs, and split this classname to get the number of chars expected.
基本上，我所做的就是设置text-transform的特殊输入uppercase以获取有多宽一些半一致预期会以文字填写。然后我应用了一个类名，指示该字段应该是自动调整大小的，以及我们期望的字符数：sizeMe-4. 使用 jQuery，我收集了所有这些输入，并拆分了这个类名以获得预期的字符数。
I extended the String object to include a repeat method which allows me to easily create a string of the expected size, and add it to an ad-hoc span element to get the width. This width was then retroactively applied to the initial input element. The span is then discarded.
我扩展了 String 对象以包含一个重复方法，该方法允许我轻松创建预期大小的字符串，并将其添加到临时 span 元素以获取宽度。然后将此宽度追溯应用于初始输入元素。然后该跨度被丢弃。
Online Demo: http://jsbin.com/epagi/2/edit
在线演示：http: //jsbin.com/epagi/2/edit
For convenience, here's the code:
为方便起见，代码如下：
<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();
});
});?
回答by Tom Stickel
Lot of outdated bad information Good luck getting
很多过时的坏信息祝你好运
size="100" to work in Chrome, not going to work
for inline style
用于内联样式
style="width:20px"
