HTML5にfloat入力タイプはありますか?

882
B. Clay Shannon 2013-09-26 07:51.

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

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

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

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

9 answers

1815
Dave 2013-09-26 08:48.

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

この値を適切な値に変更するだけです。お金の場合、小数点以下2桁が予想されます。

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

min=0それが正である場合にのみ設定します)

小数点以下の桁数をいくつでも許可したい場合は、を使用できますstep="any"(ただし、通貨の場合は、に固執することをお勧めします0.01)。ChromeとFirefoxでは、を使用するとステッパーボタンが1ずつ増加/減少しanyます。(指摘してミハルStefanowの答えのおかげで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>


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

165
Mars Robertson 2014-07-24 11:25.

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

しかし、整数と小数を問わず、すべての数値を有効にしたい場合はどうでしょうか。この場合、stepを「any」に設定します

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

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

20
alvarodoune 2016-03-16 08:39.

次を使用できます。

<input type="number" step="any" min="0" max="100" value="22.33">
14
Andrei Thuler 2018-02-26 09:46.

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

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

step="any"任意の小数を許可します。
step="1"小数は許可されません。
step="0.5"0.5を許可します。1; 1.5; ...
step="0.1"0.1を許可します。0.2; 0.3; 0.4; ..。

11
dsgdfg 2016-04-15 01:14.

HTMLテキスト入力は数値入力のみを許可します答えに基づいて

<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演算子です。

カンマでfloatを試してみると:

<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)(他のブラウザーは存在しません。)

9
sadalsuud 2017-06-14 04:26.

私はそうします

 <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

6
Stephane 2016-03-10 02:13.

私は同じ問題を抱えていた、と私はちょうど置くことによって、それを修正することができ、カンマではなくピリオド/完全に停止理由の数でフランス語のローカライズを

したがって、次のように機能します。

2はOKです

2,5OK

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

5
Kai Noack 2020-09-14 21:44.

私はinputmode="decimal"スマートフォンで完璧に動作するものを使い始めました:

<input type="text" inputmode="decimal" value="1.5">

type="text"代わりにを使用する必要があることに注意してくださいnumber。ただし、デスクトップでは、値として文字を使用できます。

デスクトップの場合、次のものを使用できます。

<input type="number" inputmode="decimal">

これは0-9.入力として、数値のみを許可します。

一部の国,では、NumPadでデフォルトとしてアクティブ化される10進除算器として使用することに注意してください。したがって、入力フィールドが.(Chromeで)期待するように、テンキーで浮動小数点数を入力することは機能しません。そのためtype="text"、Webサイトに海外のユーザーがいる場合に使用する必要があります。


これはデスクトップ(テンキーでも)と電話で試すことができます:

<p>Input with type text:</p>
<input type="text" inputmode="decimal" value="1.5">
<br>
<p>Input with type number:</p>
<input type="number" inputmode="decimal" value="1.5">


参照:https//developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

2
Irfan wani 2020-10-28 20:11.
<input type="number" step="any">

これは私にとってはうまくいきました。小数部分の長さに関係なく、入力フィールドに任意の10進数を受け入れるようにする最も簡単な方法だと思います。ステップ属性は、実際に入力フィールドに受け入れられる小数点の数を示します。たとえば、step = "0.01"は小数点以下2桁のみを受け入れます。

Related questions

MORE COOL STUFF

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは、夫に会ったとき、典型的な交際のアドバイスに逆らいました。

マイケルシーンが非営利の俳優である理由

マイケルシーンが非営利の俳優である理由

マイケルシーンは非営利の俳優ですが、それは正確にはどういう意味ですか?

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

特徴的なスターのコリン・エッグレスフィールドは、RomaDrama Liveでのスリル満点のファンとの出会いについて料理しました!加えて、大会での彼のINSPIREプログラム。

「たどりつけば」をオンラインでストリーミングできない理由

「たどりつけば」をオンラインでストリーミングできない理由

ノーザンエクスポージャーが90年代の最も人気のある番組の1つになった理由を確認するには、Blu-rayまたはDVDプレーヤーをほこりで払う必要があります。

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖は、世界で2番目に大きいボイリング湖です。そこにたどり着くまでのトレッキングは大変で長いですが、努力する価値は十分にあります。

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

サロンからのヘアトリミングや個人的な寄付は、油流出を吸収して環境を保護するのに役立つマットとして再利用できます。

ホワイトハウスの最も記憶に残る結婚式を見てください

ホワイトハウスの最も記憶に残る結婚式を見てください

過去200年以上の間にホワイトハウスで結婚したのはほんの数人です。彼らは誰でしたか、そしてそこで結婚式を獲得するために何が必要ですか?

驚くほど素晴らしいDropMixミュージックミキシングカードゲームは30ドルで驚くべき取引です

驚くほど素晴らしいDropMixミュージックミキシングカードゲームは30ドルで驚くべき取引です

DropMixはNFC対応のカードゲームで、基本的にはリミックスアーティストになります。現在、Amazonでは$ 30まで下がっており、これまでで最高の価格に匹敵します。ロックバンドで有名なHarmonixによって開発されたDropMixは、おそらく少し野心的すぎるように思われます。結局のところ、ほとんどの人は素晴らしいリズムを持っていませんが、ゲームは驚くほどうまく実行されます。

メアリーJ.ブライジがついにハリウッドウォークオブフェイムスターを獲得

メアリーJ.ブライジがついにハリウッドウォークオブフェイムスターを獲得

写真:APメアリーJ.ブライジは、間もなくハリウッドウォークオブフェイムのスターを獲得します。これは、メアリーJよりもハリウッドウォークオブフェイムのほうが正直なところ恩恵です。

MeltdownとSpectreの脆弱性についてこれまでに知っていることはすべて、簡単な方法で説明されています

MeltdownとSpectreの脆弱性についてこれまでに知っていることはすべて、簡単な方法で説明されています

画像:グラズ工科大学/ NataschaEiblがデザインしたロゴ。MeltdownとSpectreは、攻撃者がシステムメモリに保存されているあらゆる種類の情報にアクセスできるようにする2つの脆弱性に付けられた名前です。

彼のニューヨークの家から追い出されようとしている97歳の第二次世界大戦の獣医。メリーエフィングクリスマス

彼のニューヨークの家から追い出されようとしている97歳の第二次世界大戦の獣医。メリーエフィングクリスマス

日本人に襲われたときに真珠湾にいた97歳の第二次世界大戦のベテランが、ニューヨークのブルックリンから追い出されています。

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya shared a sweet photo in honor of boyfriend Tom Holland's 26th birthday Wednesday

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

シーレン「Ms.JuicyBaby」ピアソンは、先月脳卒中で入院した後、「もう一度たくさんのことをする方法を学ばなければならない」ため、言語療法を受けていることを明らかにしました。

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

オスカー受賞者の世紀半ばの家には、3つのベッドルーム、2つのバス、オーシャンフロントの景色があります。

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、生後4か月の娘、モナコに母乳育児をしていると語った。

投資ノート:Bioscout AU$300万シード

投資ノート:Bioscout AU$300万シード

Bioscoutは、農家を運転席に置くという使命を負っています。Artesian(GrainInnovate)やUniseedと並んで、最新のシードラウンドでチームを支援できることをうれしく思います。問題真菌症による重大な作物の損失は、農民にとって試練であることが証明されています。

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

遠隔医療は、パンデミック後の時代では新しいものではなく、時代遅れの分野でもありません。しかし、業界を詳しく見ると、需要と供給の強力な持続可能性と、米国で絶え間ない革命となる強力な潜在的成長曲線を示しています。

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

2021年は、世界的なベンチャーキャピタル(VC)の資金調達にとって記録的な年でした。DealStreetAsiaによると、東南アジアも例外ではなく、この地域では年間で記録的な25の新しいユニコーンが採掘されました。

ムーアの法則を超えて

ムーアの法則を超えて

計算に対する私たちの欲求とムーアの法則が提供できるものとの間には、指数関数的に増大するギャップがあります。私たちの文明は計算に基づいています—建築と想像力の現在の限界を超える技術を見つけなければなりません。

Language