web-dev-qa-db-ja.com

入力タイプ番号のローカライズ

タイプnumberの入力があるChromeで実行されているWebアプリケーションで作業しています。私のロケールでは、コンマが10進数に使用され、スペースが1000の区切りに使用されます（それほど重要ではありません）が、これらの文字を数字フィールドに入力すると、それらが単純に削除され、金額が事実上100増加します。

ブラウザの設定とページの両方で言語を設定しましたが、小数にはピリオドを使用する必要があります。コンマを受け入れるようにフィールドを構成する方法はありますか？

または、javascriptを使用してこれを解決する必要があります。キーダウンイベントを処理し、ユーザーの入力に応じてコンマをピリオドに変更できると思いますが、それではユーザーエクスペリエンスが向上しませんか？それで、コードのフットプリントを最小限に抑えてこれを達成するにはどうすればよいですか？

javascripthtml5localization
35
Jørgen

HTML5 input type=numberは、定義と実装の両方のために、ローカライズの観点からは不十分です。ローカライズすることを意図していますが、browserのロケールに従って設定することはできず、デザイナー/作成者としても知ることはできません。

Chromeでは、input type=number step=0.001は、1,2（コンマ付き）を受け入れ、1.2として送信し、1.20（ピリオド付き）を受け入れ、目に見える形で1200に変換し、そのまま送信します。これは、ブラウザーのロケールがフィンランド語である場合、多かれ少なかれ物事がどのように意味されるかということです。しかし、1 200（フィンランド語で1200を記述する標準的な方法）を受け入れず、代わりに数字1だけを送信します。

だからそれはむしろ絶望的です。見つけることができるJavaScriptウィジェット、または単純なテキスト入力ボックスを使用します。おそらく何よりもinput type=numberすべてのユーザーが同じロケールのブラウザーを使用し、数値の形式に同じ期待を抱いていない限り。

26
Jukka K. Korpela

アップ/ダウンティックが必要ない場合は、次の回避策が役立ちます。

ドイツ語のコンマ（、）のみ：

<input type="text" pattern="[0-9]+([,][0-9]{1,2})?" name="amount">

ドット（。）のみ：

<input type="text" pattern="[0-9]+([\.][0-9]{1,2})?" name="amount">

両方とも一緒にしないでください：（1000個のセパレータなし）

<input type="text" pattern="[0-9]+([\.|,][0-9]{1,2})?" name="amount">

それ以外の場合、ドイツ語/ドイツ語の番号：

<input name="myinput" value="0" step="0.01" lang="de-DE" type="number">

そして、次のスタイルを設定します。

input[type=number] {
    -moz-appearance:textfield;
    -webkit-appearance: none;
    appearance: textfield;
}
12
Frank

仕様は明確です：小数点としてピリオドのみを使用できます。フォームに ローカリゼーションサポート を提供するのはブラウザ次第です。千の区切り文字は使用できません。

8
Aeyoun

残念ながら、これらの文字は<input type="number">では使用できません

こちらの仕様をご覧ください： http://w3c.github.io/html-reference/datatypes.html#common.data.float-def

これはあなたが望むフォーマットですか？ http://jsfiddle.net/S8rqY/

3
wakooka