javascript - html5 输入类型编号 : detect whether spinbox or not (and no other features)

Question

在 Webkit 浏览器中，输入 [type=number] 有一个旋转框控件:

但是，Safari 不遵循其他一些输入[type=number] 规则，例如强制只输入数字字符。因此，Modernizr 检测到 Safari 不支持 input[type=number]。

我对数字输入宽度有非常特殊的需求，当有旋转框时，我将宽度设置为 2.7em，如果没有它(如在 Firefox 中)，宽度只需 1.7em。所以 Chrome 和 Firefox 看起来都不错。但是 Safari 放入一个旋转框但不遵循任何其他规则，所以它得到 1.7em 宽度，看起来像这样:

我只关心是否有旋转框控件。我不关心 Safari 违反的任何其他 input[type=number] 规则。 Safari 正在按照我关心的唯一规则进行游戏。我如何检测到它？

Answer 1

我建议 hiding Modernizr 未检测到对数字输入的支持时的旋转框:

JS:

if (!Modernizr.inputtypes.number) {
    $('body').addClass('no-number-input');
}

CSS:

.no-number-input input::-webkit-outer-spin-button,
.no-number-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; 
}

如果你真的想检测旋转框是否可见，你可以这样做:

window.getComputedStyle(input, '-webkit-inner-spin-button').getPropertyValue('-webkit-appearance') != 'none'

其中 input 是一个“原始”元素，尽管这可能不是很可靠，例如在 Windows 的 Safari 中。