样式化HTML5输入类型编号

Question

我正在用HTML5写一个表单。其中一项输入是type=number。我希望输入只显示2位数，但它似乎默认显示至少5位数，这占用了额外的空间。我尝试添加size="2"属性，但没有效果。

这是我正在使用的标签：

<input type="number" name="numericInput" size="2" min="0" max="18" value="0" />

我错过了什么？

Answer 1

HTML5数字输入没有宽度或大小等样式属性，但您可以使用CSS轻松设置样式。

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

Answer 2

我一直在寻找相同的解决方案，这对我有用...添加内联css标签来控制输入的宽度。

例如：

<input type="number" min="1" max="5" style="width: 2em;">

结合min和max属性，您可以控制输入的宽度。

Answer 3

不幸的是，在HTML 5中，'pattern'属性仅链接到4-5个属性。但是，如果您愿意使用“文本”字段并稍后转换为数字，这可能会对您有所帮助;

这会将输入从1个字符（数字）限制为3。

<input name=quantity type=text pattern='[0-9]{1,3}'>

CSS基本上允许使用“Thumbs up”或“Down”进行确认。

Example 1

Example 2

Answer 4

只有4个特定的属性：

1. value - 值是首次加载页面时输入框的默认值。无论您使用哪种类型，这都是元素的通用属性。
2. min - 显然，这个数字的最小值。我应该为我的演示指定最小值为0，因为负数对于一周内观看的电影数量没有意义。
3. max - 显然，这表示输入数字的最大数量。
4. step - 步骤比例因子，如果未指定此属性，则默认值为1.

因此您无法通过关键字控制用户类型的长度。但是浏览器的实现可能会改变。

Answer 5

有一种方法：

<input type="number" min="0" max="100" step="5"/>  

Answer 6

<input type="number" name="numericInput" size="2" min="0" maxlength="2" value="0" />