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

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

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

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

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

パンデミックは終わったかもしれないが、Covid-19 は終わっていない

パンデミックは終わったかもしれないが、Covid-19 は終わっていない

2021 年 6 月 8 日にニューヨーク市で開催された covid-19 パンデミックで亡くなった人々の命を偲び、祝うために、ネーミング ザ ロスト メモリアルズが主催するイベントと行進の最中に、グリーンウッド墓地の正門から記念碑がぶら下がっています。週末、ジョー・バイデン大統領は、covid-19 パンデミックの終息を宣言しました。これは、過去 2 年以上にわたり、公の場でそうするための長い列の中で最新のものです。

デビル・イン・オハイオの予告編は、エミリー・デシャネルもオハイオにいることを明らかにしています

デビル・イン・オハイオの予告編は、エミリー・デシャネルもオハイオにいることを明らかにしています

オハイオ州のエミリー・デシャネル みんな早く来て、ボーンズが帰ってきた!まあ、ショーボーンズではなく、彼女を演じた俳優. エミリー・デシャネルに最後に会ってからしばらく経ちました.Emily Deschanel は、長期にわたるプロシージャルな Bones の Temperance “Bones” Brennan としてよく知られています。

ドナルド・トランプはFBIのマー・ア・ラーゴ襲撃映像をリリースする予定ですか?

ドナルド・トランプはFBIのマー・ア・ラーゴ襲撃映像をリリースする予定ですか?

どうやら、ドナルド・トランプに近い人々は、今月初めにFBIによって家宅捜索された彼のMar-a-Lago財産からの映像を公開するよう彼に勧めています. 前大統領はテープを公開するかどうかを確認していませんが、息子はフォックス・ニュースにそうなるだろうと語った.

Andor は、他の Star Wars ショーから大きな距離を置きます。

Andor は、他の Star Wars ショーから大きな距離を置きます。

アンドールの一場面。数十年前、ジョージ・ルーカスがスター・ウォーズのテレビ番組を制作するのを妨げた主な理由は、お金でした。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language