输入类型“数字”不会调整大小

将类型更改为type="number"但可以使用时，为什么不调整输入大小type="text"？

例

    Email: <input type="text" name="email" size="10"><br/>
  number: <input type="number" name="email" size="10">

似乎该input类型number不支持size属性或与浏览器不兼容，您可以通过CSS进行设置：

input[type=number]{
    width: 80px;
} 

更新小提琴

使用方法不正确。

通过向上和向下箭头使输入类型号具有可选值。

因此，基本上，您正在寻找“宽度” CSS样式。

历史上，输入文本使用等宽字体设置格式，因此大小也就是其宽度。

输入的数字是新的，“ size”属性根本没有意义*。典型用法：

<input type="number" name="quantity" min="1" max="5">

w3c文档

要修复，请添加样式：

<input type="number" name="email" style="width: 7em">

编辑：如果您想要一个范围，您必须设置type="range"而不是="number"

编辑2：*大小不是允许的值（所以，没有意义）。查看官方W3C规格

注意：size属性适用于以下输入类型：文本，搜索，电话，URL，电子邮件和密码。

提示：要指定元素中允许的最大字符数，请使用maxlength属性。

而不是设置长度，而是设置数字输入的最大值和最小值。

输入框然后调整大小以适合最长的有效值。

如果要允许3位数字，则将999设置为最大值

 <input type="number" name="quantity" min="0" max="999">

对于<input type=number>HTML5 CR，对于，该size属性是不允许的。但是，在“过时的功能”中说：“尽管本规范中其他地方有相反的要求，但作者不应该，但是可以在类型属性为Number状态的输入元素上指定maxlength和size属性。无论如何使用这些属性的一个有效理由是帮助不支持type =“ number”输入元素的旧式用户代理仍然以有用的宽度呈现文本字段。”

因此，size可以使用该属性，但它只会影响不支持的旧版浏览器type=number，因此该元素将退回给简单的文本控件<input type=text>。

这样做的基本原理是，为了获得良好的可用性，期望浏览器提供一个考虑其他属性的用户界面。随着实现的变化，作者施加的任何大小都可能使事情搞砸。（这也适用于在CSS中设置控件的宽度。）

结论是您应该<input type=number>在或多或少的流体设置中使用，该设置不会对元素的尺寸做任何假设。

你想要的是maxlength。

有效期text，search，url，tel，email，和password，它定义字符的最大数目（作为UTF-16代码单位）的用户可输入到该字段。必须为0或更高的整数。如果未指定maxlength或指定了无效值，则该字段没有最大长度。此值还必须大于或等于minlength的值。

您可能考虑使用这些input类型之一。

使用onkeypress事件。邮政编码框示例。它最多允许5个字符，并检查以确保输入仅是数字。

当然，没有什么比服务器端验证更胜一筹了，但这是一个很不错的方法。

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">

将type =“ number”更改为type =“ tel”