样式化 HTML5 输入类型编号

Posted 2023-02-22

【中文标题】样式化 HTML5 输入类型编号

【英文标题】：Styling HTML5 input type number

【发布时间】：2012-08-17 11:33:51

【问题描述】：

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

这是我正在使用的标签：

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

我错过了什么？

【问题讨论】：

如果存在最大属性并且没有宽度，则输入应将其大小调整为最大值。至少在 google chrome 中是这样的。

【参考方案1】：

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

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

【讨论】：

澄清一下，size 对于 HTML5 仍然存在，但它只对以下类型有效：文本、搜索、电话、网址、电子邮件和密码 w3schools.com/tags/att_input_size.asp

这是有道理的。 size 指的是文本的长度，所以它只适用于字符串。

【参考方案2】：

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

例如：

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

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

【讨论】：

此解决方案的问题在于，这可能会限制应显示的数字的可见性，因为输入数字框的部分宽度是其中包含的向上和向下箭头。

与其他替代方案相比，我喜欢这个解决方案（或类似style="max-width: 3em;"） - 至少宽度与所使用的字体大小相关

【参考方案3】：

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

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

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

CSS 基本上允许通过“竖起大拇指”或“向下”进行确认。

Example 1

Example 2

【讨论】：

这太令人沮丧了。我找了很久才找到你的答案。

数字状态有一个'max'属性，只需将其设置为999

@Dane，您的脚本不工作。没有显示绿色的竖起大拇指。

对不起@Dane，这根本不起作用。此外，除了解析之外，文本和数字输入之间还有其他区别。我使用正确输入类型的主要原因是虚拟键盘（电话）显示相关键。

pattern 属性只对提交进行验证，但不会阻止我插入无效字符

【参考方案4】：

只有 4 个特定属性：

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

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

【讨论】：

好的，所以，目前没有办法将数字输入框的样式设置得更小。

【参考方案5】：

您还可以将size 属性替换为style 属性：<input type="number" name="numericInput" style="width: 50px;" min="0" max="18" value="0" />

【参考方案6】：

有办法：

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

【讨论】：

这并不能完全回答这个问题，至少对于我所尝试的来说不是。我使用铬，Windows 10

【参考方案7】：

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

【讨论】：

请编辑您的答案，并解释为什么这样可以解决问题。