53

type の入力がある Chrome で実行されている Web アプリケーションで作業していますnumber。私のロケールでは、カンマは 10 進数に使用され、スペースは 1000 単位の区切りに使用されますが (それほど重要ではありません)、これらの文字を数値フィールドに入力すると、それらの文字が単純に削除され、実質的に金額が 100 ずつ増えます。

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

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

4

5 に答える 5

39

HTML5input type=numberは、定義と実装の両方が原因で、ローカリゼーションの観点からは不十分です。これはローカライズされることを意図していますが、ブラウザのロケールに従って設定することも、デザイナー/作成者として知ることさえできません。

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

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

于 2012-11-16T12:09:02.353 に答える
27

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

コンマ (,) のみ (ドイツ語の構文と同様):

<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;
}

また、lang "global" 属性は、独自の lang 属性を持たないすべての入力要素の動作 (thx @florian) を変更できます。

<html lang="en">

見る：

有効な lang 値のリスト: https://github.com/libyal/libfwnt/wiki/Language-Code-identifiers

于 2015-10-06T14:21:14.483 に答える
12

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

于 2015-02-24T20:16:53.680 に答える
3

残念ながら、これらの文字は<input type="number">

ここで仕様を参照してください: http://w3c.github.io/html-reference/datatypes.html#common.data.float-def

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

于 2012-11-16T07:44:26.593 に答える