主にモバイルブラウザー用の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入力タイプを数値として保持したい場合、このような状況での「ベストプラクティス」は何ですか？

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

編集

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

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

上記の回答で欠けているのは、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属性を追加することで機能することを示し、現在の値が有効かどうかをテストするフィドルを示します。

• jsFiddle

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

注：コンマは有効ではありませんが、OSの言語/地域の設定を小数点の記号としてコンマを使用する場所に設定した場合、機能すると思われます。*注意事項*：Ubuntu / Gnome 14.04のOS言語/キーボード設定*ドイツ語*には当てはまりませんでした。

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

以下に、役立ついくつかのオプションを示します。

1.パターン属性の使用

パターン属性あなたは、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.ブラウザの検証を無効にする##

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."/>

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

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

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

入力します。valueAsNumber [=値]

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

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

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

inputmodeタグがソリューションです

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

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

ユーザーがコンマを入力すると、私が試したすべての最新のブラウザー（最新のFF、IE、edge、opera、chrome、safariデスクトップ、android chrome）でコンマが出力されます。

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

• モバイルユーザーには、数字キーボードとは異なる可能性のある電話のキーボードが表示されます。
• さらに悪いことに、電話のキーボードにはコンマのキーさえないかもしれません。

私の使用例では、私は次のことだけをしました：

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

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

注： pattern属性のサポートは好きではありませんでした。formnovalidateの方がはるかにうまく機能するようです。

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

さらにtoFixed、以下のように引数に桁数を引数として使用することで、floatを文字列に変換できます。

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

どうやらブラウザにはまだ問題があります（ChromeとFirefox Nightlyは問題なく動作します）。私は本当に数値フィールドを使用しなければならない人々のためのハックなアプローチをしています（おそらくテキストフィールドにはない小さな矢印のためです）。

私の解決策

keyupイベントハンドラーをフォーム入力に追加し、状態を追跡し、値が再び有効になったときに値を設定しました。

純粋なJSスニペット JSFIDDLE

var currentString = '';
var badState = false;
var lastCharacter = null;

document.getElementById("field").addEventListener("keyup",($event) => {
  if ($event.target.value && !$event.target.validity.badInput) {
          currentString = $event.target.value;
  } else if ($event.target.validity.badInput) {
    if (badState && lastCharacter && lastCharacter.match(/[\.,]/) && !isNaN(+$event.key)) {
      $event.target.value = ((+currentString) + (+$event.key / 10));
      badState = false;
    } else {
      badState = true;
    }
  }
  document.getElementById("number").textContent = $event.target.value;
  lastCharacter = $event.key;
});

document.getElementById("field").addEventListener("blur",($event) => {
	if (badState) {
    $event.target.value = (+currentString);
    badState = false;
		document.getElementById("number").textContent = $event.target.value;
  }
});

#result{
  padding: 10px;
  background-color: orange;
  font-size: 25px;
  width: 400px;
  margin-top: 10px;
  display: inline-block;
}

#field{
  padding: 5px;
  border-radius: 5px;
  border: 1px solid grey;
  width: 400px;
}

<input type="number" id="field" keyup="keyUpFunction" step="0.01" placeholder="Field for both comma separators">

<span id="result" >
 <span >Current value: </span>
 <span id="number"></span>
</span>

Angular 9スニペット

@Directive({
  selector: '[appFloatHelper]'
})
export class FloatHelperDirective {
  private currentString = '';
  private badState = false;
  private lastCharacter: string = null;

  @HostListener("blur", ['$event']) onBlur(event) {
    if (this.badState) {
      this.model.update.emit((+this.currentString));
      this.badState = false;
    }
  }

  constructor(private renderer: Renderer2, private el: ElementRef, private change: ChangeDetectorRef, private zone: NgZone, private model: NgModel) {
    this.renderer.listen(this.el.nativeElement, 'keyup', (e: KeyboardEvent) => {
      if (el.nativeElement.value && !el.nativeElement.validity.badInput) {
        this.currentString = el.nativeElement.value;
      } else if (el.nativeElement.validity.badInput) {
        if (this.badState && this.lastCharacter && this.lastCharacter.match(/[\.,]/) && !isNaN(+e.key)) {
          model.update.emit((+this.currentString) + (+e.key / 10));
          el.nativeElement.value = (+this.currentString) + (+e.key / 10);
          this.badState = false;
        } else {
          this.badState = true;
        }
      }       
      this.lastCharacter = e.key;
    });
  }
  
}

<input type="number" matInput placeholder="Field for both comma separators" appFloatHelper [(ngModel)]="numberModel">

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

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

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

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

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

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

JSでの数値のローカリゼーションは、Chromeで機能しない国際化（数値のフォーマット "num.toLocaleString（）"）でもカバーされています。