2

我有几个不同长度的数字输入,我想设置它们的样式,使输入框不会超过必要的长度:

<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 不识别number类型输入,并将处理输入假设它们是text框。因此sizeandmaxlength将应用于输入框。

Chrome 会识别number输入类型,并会根据max值加上旋转(上/下)按钮的宽度自动限制输入框的大小。

然而,同样识别number类型输入的 Opera 做的事情却不同。它使用该size值来计算输入框的大小,如果没有提供,则使用浏览器默认值。它没有考虑旋转按钮的宽度,导致部分输入被遮挡。

考虑到我在 Opera 浏览器中提到的问题,有没有办法正确设置数字输入的样式,使它们不会超过必要的长度?

4

2 回答 2

3

没有讨厌的黑客,你能做的最好的可能就是通过以下方式增加你的输入大小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 仅针对歌剧 - 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 } 
}
于 2012-06-24T10:53:33.667 回答
0

我认为这可能是另一种解决方案:

noindex:-o-prefocus, input[type=number] {
 padding-right: 1.5em;
}
于 2012-06-24T11:26:01.437 回答