html5输入类型编号:检测是否旋转框(没有其他功能)

Question

在Webkit浏览器中,输入[type = number]具有一个spinbox控件:

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

我对数字输入宽度有非常特殊的需求,当有旋转框时,我制作宽度为2.7em而没有它(如在Firefox中),宽度只需要是1.7em.所以Chrome和Firefox都很好看.但Safari放入一个spinbox但不遵循任何其他规则,因此它获得1.7em宽度,如下所示:

我只关心是否有旋转控制器.我不关心Safari正在藐视的任何其他输入[type = number]规则.Safari是我唯一关心的规则.我怎么检测到？

Answer 1

当Modernizr没有检测到对数字输入的支持时,我建议隐藏 spinbox:

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是"原始"元素,虽然这可能不太可靠,例如在Safari for Windows中.