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

Question

为什么当我将类型更改为

type="number"

时我的输入不会调整大小，但它可以与

type="text"

一起使用？

示例

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

Answer 1

好像

input

类型

number

不支持

size

属性或者不兼容浏览器，可以通过CSS来设置：

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

更新了小提琴

Answer 2

使用不当。

输入类型编号可以通过向上和向下箭头选择值。

所以基本上你正在寻找“宽度”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规范

注意：大小属性适用于以下输入类型：文本、 搜索、电话、网址、电子邮件和密码。

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

Answer 3

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

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

如果您想允许 3 位数字，请将 999 设置为最大值

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

Answer 4

对于

<input type=number>

，HTML5 CR 不允许使用

size

属性。然而，在Obsolete features中它说：“尽管本规范中其他地方有相反的要求，但作者不应该在类型属性处于 Number 状态的输入元素上指定 maxlength 和 size 属性。不管怎样，使用这些属性的一个有效原因是帮助不支持 type="number" 的输入元素的旧用户代理仍然以有用的宽度呈现文本字段。”

因此，可以使用

size

属性，但它只会影响不支持

type=number

的旧版浏览器，以便该元素回退到简单的文本控件

<input type=text>

。

这背后的基本原理是，浏览器应该提供一个考虑其他属性的用户界面，以实现良好的可用性。由于实现可能有所不同，作者强加的任何大小都可能会把事情搞砸。 （这也适用于在 CSS 中设置控件的宽度。）

结论是，您应该在或多或少流动的设置中使用

<input type=number>

，不对元素的尺寸做出任何假设。

Answer 5

你想要的是

maxlength

。

适用于

text

、

search

、

url

、

tel

、

email

和

password

，它定义用户可以在字段中输入的最大字符数（作为 UTF-16 代码单元） 。这必须是 0 或更大的整数值。如果未指定 maxlength，或者指定了无效值，则该字段没有最大长度。该值也必须大于或等于 minlength 的值。

您可以考虑使用以下

input

类型之一。

Answer 6

对于“数字”类型，使用最小值和最大值而不是使用大小，输入框大小将根据最大值自动调整。

例如： 数量:

Answer 7

如果您想将

input

类型

number

字段长度设置为一定数量的字符（而不是像素），您可以按照以下方式进行：

input[type=number] {
    width: 7ch; /* 7 characters width */
}

Answer 8

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

Answer 9

将 type="number" 更改为 type="tel"