我有几个不同长度的数字输入,我想对其进行样式设置,以使输入框不超过所需的长度:
<input type=number name=short value='1' min=0 max=9 size=1 maxlength=1>
<input type=number name=medium value='123' min=0 max=999 size=3 maxlength=3>
<input type=number name=long value='12345' min=0 max=99999 size=5 maxlength=5>
Firefox 无法识别数字
类型的输入,并且会假设它们是文本
框来处理输入。因此,size
和 maxlength
将应用于输入框。
Chrome 可以识别 number
类型的输入,并会根据 max
值加上旋转(向上/向下)按钮的宽度自动限制输入框的大小。
但是,Opera 也可以识别 number
类型输入,其处理方式有所不同。它使用 size
值来计算输入框的大小,如果未提供,则使用浏览器默认值。它没有考虑旋转按钮的宽度,导致部分输入被遮挡。
是否有一种方法可以正确设置数字输入的样式,使其不超过必要的长度,并考虑到我在 Opera 浏览器中提到的问题?
最佳答案
在没有令人讨厌的黑客攻击的情况下,您能做的最好的事情可能就是将输入大小增加1
:
<input type=number name=short value='1' min=0 max=9 size=2 maxlength=1>
<input type=number name=medium value='123' min=0 max=999 size=4 maxlength=3>
<input type=number name=long value='12345' min=0 max=99999 size=6 maxlength=5>
在 FF 和 Webkit 中不会有太大区别,但在 Opera 中会正确显示
更新 或者,您可以使用 CSS hack 仅针对 Opera - http://jsfiddle.net/KmHwG/4/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
input[name=short] { width: 24px }
input[name=medium] { width: 38px }
input[name=long] { width: 52px }
}
关于html - 输入类型数字的跨浏览器样式,使其长度不会超过必要的长度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11176759/