Html 输入类型“数字”不会调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22709792/
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
Input type "number" won't resize
提问by SaturnsEye
回答by Felix
Seem like the inputtype numberdoes not support sizeattribute or it's not compatible along browsers, you can set it through CSS instead:
似乎该input类型number不支持size属性或与浏览器不兼容，您可以通过 CSS 进行设置：
input[type=number]{
width: 80px;
}
回答by MrPk
Incorrect usage.
不正确的使用。
Input type number it's made to have selectable value via arrows up and down.
输入类型编号通过向上和向下箭头使其具有可选值。
So basically you are looking for "width" CSS style.
所以基本上你正在寻找“宽度”CSS 样式。
Input text historically is formatted with monospaced font, so size it's also the width it takes.
输入文本历史上是用等宽字体格式化的，所以大小也是它需要的宽度。
Input number it's new and "size" property has no sense at all*. A typical usage:
输入数字是新的，“大小”属性根本没有意义*。典型用法：
<input type="number" name="quantity" min="1" max="5">
to fix, add a style:
要修复，请添加样式：
<input type="number" name="email" style="width: 7em">
EDIT: if you want a range, you have to set type="range"and not ="number"
编辑：如果你想要一个范围，你必须设置type="range"而不是="number"
EDIT2: *size is not an allowed value (so, no sense). Check out official W3C specifications
EDIT2: *size 不是允许的值（所以，没有意义）。查看官方W3C 规范
Note: The size attribute works with the following input types: text, search, tel, url, email, and password.
Tip: To specify the maximum number of characters allowed in the element, use the maxlength attribute.
注意：size 属性适用于以下输入类型：文本、搜索、电话、网址、电子邮件和密码。
提示：要指定元素中允许的最大字符数，请使用 maxlength 属性。
回答by Michael
Rather than set the length, set the max and min values for the number input.
不是设置长度，而是设置数字输入的最大值和最小值。
The input box then resizes to fit the longest valid value.
输入框然后调整大小以适应最长的有效值。
If you want to allow a 3-digit number then set 999 as the max
如果您想允许 3 位数字，则将 999 设置为最大值
<input type="number" name="quantity" min="0" max="999">
回答by Jukka K. Korpela
For <input type=number>, by the HTML5 CR, the sizeattribute is not allowed. However, in Obsolete featuresit says: “Authors should not, but may despite requirements to the contrary elsewhere in this specification, specify the maxlength and size attributes on input elements whose type attributes are in the Number state. One valid reason for using these attributes regardless is to help legacy user agents that do not support input elements with type="number" to still render the text field with a useful width.”
对于<input type=number>，HTML5 CRsize不允许使用该属性。然而，在Obsolete features 中它说：“作者不应该，但尽管在本规范的其他地方有相反的要求，但可以在类型属性处于 Number 状态的输入元素上指定 maxlength 和 size 属性。不管怎样，使用这些属性的一个有效原因是帮助不支持 type="number" 输入元素的旧用户代理仍然以有用的宽度呈现文本字段。”
Thus, the sizeattribute can be used, but it only affects older browsers that do not support type=number, so that the element falls back to a simple text control, <input type=text>.
因此，size可以使用该属性，但它只会影响不支持 的旧浏览器type=number，从而使元素回退到简单的文本控件<input type=text>。
The rationale behind this is that the browser is expected to provide a user interface that takes the other attributes into account, for good usability. As the implementations may vary, any size imposed by an author might mess things up. (This also applies to setting the width of the control in CSS.)
这背后的基本原理是浏览器应该提供一个用户界面，将其他属性考虑在内，以获得良好的可用性。由于实现可能会有所不同，作者强加的任何大小都可能把事情搞砸。（这也适用于在 CSS 中设置控件的宽度。）
The conclusion is that you should use <input type=number>in a more or less fluid setup that does not make any assumptions about the dimensions of the element.
结论是，您应该<input type=number>在一个或多或少的流体设置中使用，该设置不对元素的尺寸进行任何假设。
回答by Michael
Use an on onkeypress event. Example for a zip code box. It allows a maximum of 5 characters, and checks to make sure input is only numbers.
使用 onkeypress 事件。邮政编码框的示例。它最多允许 5 个字符，并检查以确保输入只是数字。
Nothing beats a server side validation of course, but this is a nifty way to go.
当然，没有什么比服务器端验证更胜一筹了，但这是一个不错的方法。
function validInput(e) {
e = (e) ? e : window.event;
a = document.getElementById('zip-code');
cPress = (e.which) ? e.which : e.keyCode;
if (cPress > 31 && (cPress < 48 || cPress > 57)) {
return false;
} else if (a.value.length >= 5) {
return false;
}
return true;
}#zip-code {
overflow: hidden;
width: 60px;
}<label for="zip-code">Zip Code:</label>
<input type="number" id="zip-code" name="zip-code" onkeypress="return validInput(event);" required="required">回答by user1882196
change type="number" to type="tel"
将 type="number" 更改为 type="tel"
