1. ホーム
  2. html

[解決済み] HTML5でfloat入力タイプはありますか?

2022-03-19 19:19:52

質問

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

しかし、これは(Chromeの最新バージョンでは)単純に、浮動小数点ではなく整数の"updown"コントロールなのです。

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

HTML5 にネイティブな浮動小数点入力要素、または数値入力タイプを int ではなく浮動小数点数で動作させる方法はありますか?それとも、jQuery UIプラグインに頼らなければならないのでしょうか?

どのように解決するのですか?

その number タイプには step の値は、どの数字が有効かを制御します。 maxmin ) にデフォルトで設定されます。 1 . この値は、ステッパーボタンの実装でも使用されます(例:上を押すと step ).

この値を適当なものに変更すればよい。お金の場合は、小数点以下2桁が期待されるでしょう。

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

(私なら、さらに min=0 正でなければならない場合)

小数点以下の桁数を任意に設定したい場合は step="any" (ただし、通貨の場合、私は 0.01 ). Chrome & Firefoxでは、ステッパーボタンは、以下のように1ずつ増加/減少します。 any . (ミハエル・ステファノフさんの回答で any 、および 関連する仕様はこちらをご覧ください )

ここでは、さまざまなステップがさまざまな入力タイプにどのように影響するかを示すプレイグラウンドを紹介します。

<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>


いつものように簡単に補足しておくと、クライアントサイドの検証はユーザーの利便性を高めるだけだということを覚えておいてください。サーバーサイドでの検証も必要です!