[英]html5 input type number: detect whether spinbox or not (and no other features)
In Webkit browsers, an input[type=number] has a spinbox control: 在Webkit浏览器中,输入[type = number]具有一个spinbox控件:
However, Safari does not follow some other input[type=number] rules, like enforcing that only numeric characters are entered. 但是,Safari不遵循其他一些输入[type = number]规则,例如强制只输入数字字符。 Hence, Modernizr detects that Safari does not support input[type=number]. 因此,Modernizr检测到Safari不支持输入[type = number]。
I have very particular needs for number-input width, and when there's a spinbox I make the width 2.7em and without it (like in Firefox), the width need only be 1.7em. 我对数字输入宽度有非常特殊的需求,当有旋转框时,我制作宽度为2.7em而没有它(如在Firefox中),宽度只需要是1.7em。 So Chrome and Firefox both look fine. 所以Chrome和Firefox都很好看。 But Safari puts in a spinbox but doesn't follow any other rules, so it gets the 1.7em width and looks like this: 但Safari放入一个spinbox但不遵循任何其他规则,因此它获得1.7em宽度,如下所示:
I only care if there's a spinbox control. 我只关心是否有旋转控制器。 I don't care about any of the other input[type=number] rules that Safari is flouting. 我不关心Safari正在藐视的任何其他输入[type = number]规则。 Safari is playing by the only rule I care about. Safari是我唯一关心的规则。 How do I detect that? 我怎么检测到?
I suggest hiding the spinbox when Modernizr doesn't detect support for number inputs: 当Modernizr没有检测到对数字输入的支持时,我建议隐藏 spinbox:
JS: JS:
if (!Modernizr.inputtypes.number) {
$('body').addClass('no-number-input');
}
CSS: CSS:
.no-number-input input::-webkit-outer-spin-button,
.no-number-input input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
If you really want to detect whether the spinbox is visible you can do something like: 如果您真的想要检测旋转框是否可见,您可以执行以下操作:
window.getComputedStyle(input, '-webkit-inner-spin-button').getPropertyValue('-webkit-appearance') != 'none'
where input
is a "raw" element, although this may not be very reliable, eg in Safari for Windows. input
是“原始”元素,尽管这可能不太可靠,例如在Safari for Windows中。
if (Modernizr.inputtypes.number) {
$('input[type=number]').width('2.7em');
} else {
$('input[type=number]').width('1.7em');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.