HTML5输入类型数字：检测是否为旋转框或其他特性

Question

在Webkit浏览器中，输入框[type=number]有一个微调框控件：

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

我对于数字输入框的宽度有非常特定的需求，当有微调框时，我将宽度设置为2.7em，而没有微调框（如在Firefox中）时，宽度只需要为1.7em。所以Chrome和Firefox看起来都很好。但是Safari插入了微调框，但没有遵循任何其他规则，因此它得到了1.7em的宽度，并且看起来像这样：

我只关心是否有微调框控件。我不关心Safari违反的任何其他输入框[type=number]规则。Safari遵循我关心的唯一规则。我该如何检测？

- chadoh

---

这只是一个猜测，不过你可以尝试确定输入框的宽度，将其改为“数字”类型，重新测量宽度，看看是否更改了。我怀疑这不会起作用，但这是一个主意。 - Tower

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; 
}

如果你真的想检测SpinBox是否可见，可以这样做：

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

其中input是一个“原始”元素，尽管在Windows版Safari中可能不太可靠。

- Jeffery To

Answer 2

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

- Codler

---

这基本上就是我现在正在做的事情。Modernizr 足够聪明，可以看到 Safari 实际上 不支持数字输入，因为 Safari 没有强制要求只能输入数字。这就是问题的根源。Safari确实会放入旋转框控件，而这正是我想要检查的所有内容。 - chadoh