web-dev-qa-db-ja.com

HTML5にはfloat入力型がありますか？

html5.org によると、 "number"入力タイプの "value"属性は、指定されていて空でない場合、有効な浮動小数点の値を持たなければなりません数。"

それでも、（とにかく最新バージョンのChromeでは）単なる整数での「アップダウン」コントロールであり、浮動小数点数ではありません。

<input type="number" id="totalAmt"></input>

HTML5に固有の浮動小数点入力要素、または数値入力タイプを整数ではなく浮動小数点数で動作させる方法はありますか？それとも、私はjQueryのUIプラグインに頼る必要がありますか？

html5inputfloating-point
683
B. Clay Shannon

number型には、有効な数値を制御するstep値があり（maxとminと共に）、デフォルトは1です。この値は、ステッパーボタンの実装でも使用されます（つまり、押し上げるとstep）。

この値を適切なものに変更するだけです。お金のために、2つの小数点以下の桁がおそらく予想されます。

<input type="number" step="0.01">

（私はmin=0もそれがポジティブになることができるだけなら設定します）

小数点以下の桁数をいくつでも許可する場合は、step="any"を使用できます（通貨の場合は、0.01を使用することをお勧めします）。 ChromeおよびFirefoxでは、anyを使用するとステッパーボタンが1ずつ増減します。 （anyを指摘してくれたMichal Stefanowの回答に感謝します。 ここで関連する仕様を参照してください ）

さまざまなステップがさまざまな入力タイプにどのように影響するかを示す遊び場です。

<form>
  <input type=number step=1 /> Step 1 (default)<br />
  <input type=number step=0.01 /> Step 0.01<br />
  <input type=number step=any /> Step any<br />
  <input type=range step=20 /> Step 20<br />
  <input type=datetime-local step=60 /> Step 60 (default)<br />
  <input type=datetime-local step=1 /> Step 1<br />
  <input type=datetime-local step=any /> Step any<br />
  <input type=datetime-local step=0.001 /> Step 0.001<br />
  <input type=datetime-local step=3600 /> Step 3600 (1 hour)<br />
  <input type=datetime-local step=86400 /> Step 86400 (1 day)<br />
  <input type=datetime-local step=70 /> Step 70 (1 min, 10 sec)<br />
</form>

いつものように、私は簡単なメモを付け加えます：クライアントサイドのバリデーションはユーザーにとって単に便利であることを覚えていてください。サーバー側で検証する必要があります。

1393
Dave

経由： http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

しかし、もしあなたがすべての数を有効にしたいのであれば、整数と小数は同様にどうですか？この場合、stepを“ any”に設定してください。

<input type="number" step="any" />

私はChromeで動作しますが、他のブラウザではテストされていません。

133
Michal Stefanow

あなたが使用することができます：

<input type="number" step="any" min="0" max="100" value="22.33">

手助けをしたい

14
alvarodoune

この の回答に基づく

<input type="text" id="sno" placeholder="Only float with dot !"   
   onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||  
   event.charCode == 46 || event.charCode == 0 ">

意味：

文字コード：

  • 48-57は0, 1, 2, 3, 4, 5, 6, 7, 8, 9と同じです
  • 0はBackspaceです（そうでなければFirefoxのページを更新する必要があります）
  • 46はdotです

&&はAND、||はOR演算子です。

あなたがカンマでフロートしようとすると：

<input type="text" id="sno" placeholder="Only float with comma !"   
     onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||  
     event.charCode == 44 || event.charCode == 0 ">

Chromium、Firefox（Linux X64）に対応（他のブラウザ私は存在しません）

8
dsgdfg

入力タイプ番号にstep属性を使用できます。

<input type="number" id="totalAmt" step="0.1"></input>

step="any"は任意の10進数を許可します。
step="1"は10進数を許可しません。
step="0.5"は0.5を許可します。 1; 1.5; ...
step="0.1"は0.1を許可します。 ０．２； 0.3; ０．４； ...

6
Andrei Thuler

私はそうします

 <input id="relacionac" name="relacionac" type="number" min="0.4" max="0.7" placeholder="0,40-0,70" class="form-control input-md" step="0.01">

次に、ステップ0.01で、最小値を0.4、最大値を0.7と定義します。0.4、0.41、0、42 ... 0.7

5
sadalsuud

私はちょうど同じ問題を抱えていました、そして、私はカンマでなくピリオド/ ピリオドフランス語の地域化）のために数を入れることによってそれを直すことができました。

それでそれは働きます：

2 OKです

2,5でよろしいですか

2.5はKOです（数字は「違法」と見なされ、空の値が入ります）。

2
Stephane