web-dev-qa-db-ja.com

html5入力タイプ番号での浮動小数点数と小数点区切り文字の処理方法

主にモバイルブラウザ向けのWebアプリを構築しています。数値型の入力フィールドを使用しているため、（ほとんどの）モバイルブラウザーはユーザーエクスペリエンスを向上させるために数値キーボードのみを呼び出します。このWebアプリは主に、小数点ではなく小数点がコンマである地域で使用されるため、両方の小数点を処理する必要があります。

この混乱全体をドットとコンマでカバーする方法は？

私の発見：

デスクトップChrome

  • 入力タイプ=番号
  • ユーザーが入力フィールドに「4,55」と入力します
  • $("#my_input").val();は「455」を返します
  • 入力から正しい値を取得できません

デスクトップFirefox

  • 入力タイプ=番号
  • ユーザーが入力フィールドに「4,55」と入力します
  • $("#my_input").val();は「4,55」を返します
  • それは問題ありません、コンマをドットに置き換えて正しいフロートを取得できます

Androidブラウザ

  • 入力タイプ=番号
  • ユーザーが入力フィールドに「4,55」と入力します
  • 入力がフォーカスを失うと、値は「4」に切り捨てられます
  • ユーザーを混乱させる

Windows Phone 8

  • 入力タイプ=番号
  • ユーザーが入力フィールドに「4,55」と入力します
  • $("#my_input").val();は「4,55」を返します
  • それは問題ありません、コンマをドットに置き換えて正しいフロートを取得できます

ユーザーがコンマまたはドットを小数点記号として使用し、HTMLの入力タイプを数値として保持し、ユーザーエクスペリエンスを向上させるこのような状況での「ベストプラクティス」とは何ですか。

キーイベントをバインドして、コンマを「オンザフライ」でドットに変換できますか、それは数値入力で動作しますか？

編集

Currenlty私は解決策を持っていません、入力値からfloat型の値を（文字列または数値として）取得する方法は、タイプが数値に設定されています。エンドユーザーが「4,55」と入力すると、Chromeは常に「455」を返し、Firefoxは「4,55」を返しますが、これは問題ありません。

また、Android（テスト済み4.2エミュレーター）では、「4,55」を入力フィールドに入力し、フォーカスを他の場所に変更すると、入力した数値が「4」に切り捨てられることは非常に面倒です。

javascriptjquerymobilefloating-pointhtml-input
115
devha

上記の答えに欠けているのは、step属性に別の値を指定する必要があることだと思います。これには、1のデフォルト値があります。入力の検証アルゴリズムで浮動小数点値を許可する場合は、それに応じてステップを指定します。

たとえば、ドルの金額が必要だったため、次のような手順を指定しました。

 <input type="number" name="price"
           pattern="[0-9]+([\.,][0-9]+)?" step="0.01"
            title="This should be a number with up to 2 decimal places.">

JQueryを使用して値を取得しても問題はありませんが、DOM APIを直接使用して要素のvalidity.validプロパティを取得すると便利です。

小数点についても同様の問題がありましたが、問題があることに気付いた理由は、Twitter Bootstrapが無効な値を持つ数値入力に追加するスタイリングのためでした。

以下は、step属性を追加することで機能することを示し、現在の値が有効かどうかをテストするフィドルです。

TL; DR：デフォルトは1であるため、step属性を浮動小数点値に設定します。

NOTE：コンマは検証されませんが、OSの言語/地域を設定すると小数点としてカンマを使用するどこかに設定すると、動作します。 *注の注*：OS言語/キーボード設定の場合はそうではありませんでした* Ubuntu/Gnome 14.04のドイツ語*

99
natchiketa

W3.orgによると、 数値入力 のvalue属性は 浮動小数点数 として定義されています。浮動小数点数の構文は、小数点を小数点としてのみ受け入れるようです。

あなたに役立つかもしれないいくつかのオプションを以下にリストしました：

1.パターン属性を使用する

pattern属性を使用すると、HTML5互換の方法で正規表現を使用して許可される形式を指定できます。ここでは、パターンが失敗した場合にカンマ文字を許可することと、有用なフィードバックメッセージを指定できます。

<input type="number" pattern="[0-9]+([,\.][0-9]+)?" name="my-num"
           title="The number input must start with a number and use either comma or a dot as a decimal character."/>

注：クロスブラウザのサポートは大きく異なります。完全、部分的、または存在しない場合があります。

2. JavaScript検証

単純なコールバックを、たとえばonchange（および/またはblur）イベントにバインドして、コンマを置き換えることができますまたはすべてをまとめて検証します。

3.ブラウザの検証を無効化##

第三に、そのフィールドのブラウザ検証をすべて無効にする意図で、数値入力でformnovalidate属性を使用しようとすることができます。

<input type="number" formnovalidate />

4.組み合わせ..？

<input type="number" pattern="[0-9]+([,\.][0-9]+)?" 
           name="my-num" formnovalidate
           title="The number input must start with a number and use either comma or a dot as a decimal character."/>
22
kjetilh

小数点の区切りにカンマを使用するかピリオドを使用するかは、ブラウザ次第です。ブラウザは、オペレーティングシステムまたはブラウザのロケールに基づいて決定するか、一部のブラウザはWebサイトからヒントを取得します。 ブラウザ比較チャート を作成し、さまざまなブラウザがさまざまなローカライズ方法をサポートする方法を示しています。 Safariは、カンマとピリオドを互換的に処理する唯一のブラウザです。

基本的に、Web作成者としてのあなたはこれを実際に制御することはできません。いくつかの回避策には、整数を持つ2つの入力フィールドを使用することが含まれます。これにより、すべてのユーザーが期待どおりにデータを入力できます。特にセクシーではありませんが、すべてのユーザーのあらゆるケースで機能します。

7
Aeyoun

.val()の代わりに valueAsNumber を使用します。

入力valueAsNumber [= value]

該当する場合、フォームコントロールの値を表す数値を返します。それ以外の場合は、nullを返します。
設定して、値を変更できます。
コントロールが日付ベースでも時間ベースでも数値でもない場合、INVALID_STATE_ERR例外をスローします。

7
Mike Samuel

完全な解決策は見つかりませんでしたが、できることはtype = "tel"を使用してhtml5検証（formnovalidate）を無効にすることでした。

<input name="txtTest" type="tel" value="1,200.00" formnovalidate="formnovalidate" />

ユーザーがコンマを入力すると、私が試したすべての最新ブラウザー（最新のFF、IE、Edge、オペラ、クローム、サファリデスクトップ、Androidクローム）でコンマとともに出力されます。

主な問題は次のとおりです。

  • モバイルユーザーには、数字キーボードとは異なる電話キーボードが表示されます。
  • さらに悪いことに、電話のキーボードにはコンマのキーさえない場合があります。

私のユースケースでは、次のことだけが必要でした。

  • 初期値をカンマで表示します（firefoxはtype = numberでそれを取り除きます）
  • Html5検証に失敗しない（コンマがある場合）
  • フィールドを入力として正確に読み取らせます（コンマを使用可能）

同様の要件がある場合は、これでうまくいくはずです。

注：パターン属性のサポートが気に入らなかった。 formnovalidateは、はるかにうまく機能するようです。

3
Bolo

$("#my_input").val();を呼び出すと、文字列変数として返されます。したがって、変換にはparseFloatおよびparseIntを使用します。 parseFloatを使用すると、デスクトップまたは電話自体は変数の意味を理解します。

さらに、次のように桁数の引数を持つtoFixedを使用して、floatを文字列に変換できます。

var i = 0.011;
var ss = i.toFixed(2); //It returns 0.01
1
user3511843

テキストタイプを使用しますが、数字キーボードの外観を強制します

<input value="12,4" type="text" inputmode="numeric" pattern="[-+]?[0-9]*[.,]?[0-9]+">

inputmodeタグが解決策です

1
David Navarro

数値入力にtoLocaleString（）を使用したいようです。

その使用法については、 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString を参照してください。

JSでの数値のローカライズについても Internationalization（Number format "num.toLocaleString（）"）chromeで機能しない

0
stackasec

私の推薦ですか？ jQueryをまったく使用しないでください。私はあなたと同じ問題を抱えていました。 $('#my_input').val()は常に奇妙な結果を返すことがわかりました。

document.getElementById('my_input').valueAsNumberの代わりに$("#my_input").val();を使用してから、Number(your_value_retrieved)を使用してNumberを作成してみてください。値がNaNの場合、数値ではないことは確かにわかります。

追加することの1つは、入力に数字を書き込むとき、入力は実際にほぼすべての文字（ユーロ記号、ドル、および他のすべての特殊文字を書き込むことができます）を受け入れるため、次を使用して値を取得することをお勧めしますjQueryを使用する代わりに.valueAsNumber。

ああ、ところで、ユーザーは国際化を追加できます（つまり、10進数を作成するためにドットではなくコンマをサポートします）。 Number()オブジェクトに何かを作成させるだけで、いわば10進安全です。

0
Patrick D'appollonio