样式化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;">

结合最小和最大属性,您可以控制输入的宽度.

Answer 3

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

这将输入从1个字符(数字)限制为3.

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

CSS基本上允许使用"Thumbs up"或"Down"进行确认.

例1

例2

Answer 4

具体属性只有4个：

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

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