2

入力ボックスが必要以上に長くならないようにスタイルを設定したい、さまざまな長さの数値入力がいくつかあります。

<input type=number name=short value='1' min=0 max=9 size=1 maxlength=1>
<input type=number name=medium value='123' min=0 max=999 size=3 maxlength=3>
<input type=number name=long value='12345' min=0 max=99999 size=5 maxlength=5>

Firefox はタイプ入力を認識せず、ボックスnumberであると想定して入力を処理します。textしたがって、sizeとmaxlengthが入力ボックスに適用されます。

Chrome はタイプ入力を認識し、値とスピン (アップ/ダウン) ボタンの幅にnumber基づいて、入力ボックスのサイズを自動的に制限します。max

しかし、number型入力も認識する Opera では、処理が異なります。この値を使用してsize、入力ボックスのサイズを計算するか、何も指定されていない場合はブラウザーの既定値を計算します。スピン ボタンの幅が考慮されていないため、入力の一部が見えなくなります。

Operaブラウザで言及した問題を考慮して、必要以上に長くならないように数値入力を適切にスタイルする方法はありますか?

4

2 に答える 2

3

おそらく厄介なハックなしでできる最善の方法は、入力サイズを1次のように増やすことです。

<input type=number name=short value='1' min=0 max=9 size=2 maxlength=1>
<input type=number name=medium value='123' min=0 max=999 size=4 maxlength=3>
<input type=number name=long value='12345' min=0 max=99999 size=6 maxlength=5>

FF と Webkit では大きな違いはありませんが、Opera では正しく表示されます。

更新または、CSS ハックを使用して Opera のみをターゲットにすることもできます - http://jsfiddle.net/KmHwG/4/

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    input[name=short]  { width: 24px }
    input[name=medium] { width: 38px } 
    input[name=long]   { width: 52px } 
}
于 2012-06-24T10:53:33.667 に答える
0

これは別の解決策になると思います：

noindex:-o-prefocus, input[type=number] {
 padding-right: 1.5em;
}
于 2012-06-24T11:26:01.437 に答える