1041

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

しかし、それは単純に (Chrome の最新バージョンでは)、浮動小数点数ではなく整数を使用した「アップダウン」コントロールです。

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

HTML5 ネイティブの浮動小数点入力要素、または数値入力型を int ではなく float で機能させる方法はありますか? または、jQuery UI プラグインに頼る必要がありますか?

4

14 に答える 14

2134

numberタイプには、step有効な数値を制御する値 (および とともに)maxがminあり、デフォルトは1です。この値は、ステッパー ボタンの実装でも使用されます (つまり、上に押すと が増加しstepます)。

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

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

（min=0正の値しか設定できない場合も設定します）

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

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

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

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

于 2013-09-25T18:48:21.250 に答える
188

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

しかし、整数も小数も同様に、すべての数値を有効にしたい場合はどうすればよいでしょうか? この場合、ステップを「any」に設定します</p> 

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

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

于 2014-07-23T21:25:53.460 に答える
31

以下を使用できます。

<input type="number" step="any" min="0" max="100" value="22.33">
于 2016-03-15T18:39:13.843 に答える
8

yes this is the correct answer:

step="any"

This is more efficient. Trust me.

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

document.getElementById('form1').addEventListener('submit', function(e){
e.preventDefault();
alert("Your nnumber is: "+document.getElementById('n1').value)
alert("This works no ? :) please upvote")
})
<form id="form1">
<input type="number" step="any" id="n1">
<button type="submit">Submit</button>
</form>
<!-- UPVOTE :)-->

于 2021-04-18T13:36:21.967 に答える
7

私はちょうど同じ問題を抱えていました.フランス語のローカリゼーションのため、番号にピリオド/ピリオドではなくコンマを入れるだけで修正できました.

したがって、次のように動作します。

2は大丈夫です

2,5でOK

2.5 は KO です (番号は「違法」と見なされ、空の値を受け取ります)。

于 2016-03-09T12:13:49.750 に答える
4

iPad で React を使用しても、type="number"完全には機能しません。99.99999 ～ .00000 の範囲の浮動小数点数には、正規表現を使用します(^[0-9]{0,2}$)|(^[0-9]{0,2}\.[0-9]{0,5}$)。最初のグループ(...)は、浮動小数点を除いたすべての正の 2 桁の数字 (たとえば 23) に|当てはまり、たとえば 2 番目のグループでは .12345 になり(...)ます。範囲{0,2}または{0,5}それぞれを変更するだけで、任意の正の浮動小数点数に採用できます。

<input
  className="center-align"
  type="text"
  pattern="(^[0-9]{0,2}$)|(^[0-9]{0,2}\.[0-9]{0,5}$)"
  step="any"
  maxlength="7"
  validate="true"
/>
于 2020-12-10T09:44:31.650 に答える