web-dev-qa-db-ja.com

Chrome上の浮動小数点数のHTML 5 input type = "number"要素

ユーザーに浮動小数点数を入力させる必要があるため、次の要素を使用します。

<input type="number" name="my_number" placeholder="Enter number"/>

Firefoxでうまく動作しますが、Chromeは、小数を入力しようとすると、数値が整数ではないと文句を言います。それは私の場合の問題です。 step属性を入力すると、Chromeは浮動小数点数を許可します。

<input type="number" name="my_number" placeholder="Enter number" step="0.1"/>

しかし、問題は0.15を入力できないことです... stepは私のニーズに合っていないようです。 W3C仕様 は、input type="number"の属性全体で浮動小数点数に言及しています。

Chromeを取得して、step属性なしで浮動小数点数を受け入れるにはどうすればよいですか？

htmlhtml5validationgoogle-chromehtml-input
45
at.

<input type="number" step="any" />を試してください

検証の問題は発生せず、矢印のステップは「1」になります

制約の検証：要素に許可された値のステップがあり、文字列を数値に変換して要素の値で指定された文字列に変換するアルゴリズムを適用した結果が数値であり、ステップベースから減算された数値が整数でない場合許容値ステップの倍数である場合、要素はステップの不一致に苦しんでいます。

次の範囲コントロールは、範囲0..1の値のみを受け入れ、その範囲で256ステップを許可します。

<input name=opacity type=range min=0 max=1 step=0.00392156863>

次のコントロールでは、1日の任意の時刻を任意の精度で選択できます（たとえば、1000分の1秒以上の精度）。

<input name=favtime type=time step=any>

通常、時間制御は1分の精度に制限されています。

http://www.w3.org/TR/2012/WD-html5-20121025/common-input-element-attributes.html#attr-input-step

93
Gilles V.

小数点以下2桁をターゲットにしている場合は、<input type="number" step="0.01" />を試してください:-)。

50
codermd

注：AngularJSを使用している場合、ステップ値を変更することに加えて、html入力でng-model-options="{updateOn: 'blur change'}"を設定する必要があります。

これは、ユーザーが小数点を入力できないようにするため、バリデーターの実行頻度を減らすためです。これにより、ユーザーは小数点を入力でき、ユーザーが不鮮明になった後にバリデーターが有効になります。

4
ginna

これを試して

<input onkeypress='return event.charCode >= 48 && 
                          event.charCode <= 57 || 
                          event.charCode == 46'>
1
shahzain ali