9

Webkitブラウザーでは、input [type=number]にはスピンボックスコントロールがあります。

Webkitブラウザのスピンボックスコントロール

ただし、Safariは、数字のみを入力するように強制するなど、他のinput [type=number]ルールには準拠していません。したがって、ModernizrはSafariがinput [type=number]をサポートしていないことを検出します。

数値入力の幅には特にニーズがあります。スピンボックスがある場合は幅を2.7emにし、それがない場合（Firefoxのように）、幅は1.7emで十分です。したがって、ChromeとFirefoxはどちらも問題なく表示されます。しかし、Safariはスピンボックスを配置しますが、他のルールには従わないため、1.7emの幅を取得し、次のようになります。

Safariでの数値入力

スピンボックスコントロールがあるかどうかだけが気になります。Safariが無視している他のinput[type=number]ルールは気にしません。Safariは私が気にかけている唯一のルールで遊んでいます。どうすればそれを検出できますか？

4

2 に答える 2

7

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は「生の」要素ですが、Windows の Safari などではあまり信頼できない場合があります。

于 2011-04-20T03:14:37.760 に答える
-1 
if (Modernizr.inputtypes.number) {
  $('input[type=number]').width('2.7em');
} else {
  $('input[type=number]').width('1.7em');
}
于 2011-03-19T18:34:44.603 に答える