javascript - html5输入类型号：检测是否旋转框（以及没有其他功能）

Question

在 Webkit 浏览器中，一个 input[type=number] 有一个 spinbox 控件：

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

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

我只关心是否有旋转框控件。我不关心 Safari 藐视的任何其他 input[type=number] 规则。Safari 遵循我唯一关心的规则。我该如何检测？

Answer 1

我建议在 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'

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

Answer 2

if (Modernizr.inputtypes.number) {
  $('input[type=number]').width('2.7em');
} else {
  $('input[type=number]').width('1.7em');
}