web-dev-qa-db-ja.com

Chrome auto format input = number

HTML5プロパティtype = "number"を使用して入力フィールドを数値に指定するWebアプリケーションがあります。

<input type="number" value="123456" />

タイプを指定することにより、Chromeは自動的にコンマ（123,456）を含むように値をフォーマットします。他のブラウザーでは、数値をフォーマットしませんが、数字以外の文字も防止しません。

この場合、コンマを追加したくありません。ローカライズされたフォーマットをオフにする方法はありますか？

html5google-chromeinput
70
Donovan Woodside

これは、ChromiumのHTML5 number入力タイプに関連付けられた動作が原因で発生しており、間違いなく 1つだけではありません これは重要ではありません。

過去にtextタイプを使用してこの問題を回避しました。たとえば、これはうまく機能しています（今すぐChrome 11.0.696.71でテスト済み））：

<input type="text" 
       placeholder="Enter Text" 
       name="inputName" 
       pattern="[0-9]*">

（少なくとも、私にとって）number型のこの動作は間違いなくバグです。なぜなら、 HTML5標準 はnumberが表示：

数値入力を指定して、数値を文字列に変換するアルゴリズムは次のとおりです。入力を表す有効な浮動小数点数を返します。

また、標準では「有効な浮動小数点」数 ここ が定義されており、私が見る限り、グループ化文字を含めることは想定されていません。

更新

WebKitの根底にある次のコードに問題を特定しました。ここにも問題を修正する行を含めました：

// From LocalizedNumberICU.cpp
String formatLocalizedNumber(double number, unsigned fractionDigits)
{
    NumberFormat* formatter = numberFormatter();
    if (!formatter)
        return String();
    UnicodeString result;
    formatter->setMaximumFractionDigits(clampToInteger(fractionDigits));
    formatter->setGroupingUsed(FALSE); // added this line to fix the problem
    formatter->format(number, result);
    return String(result.getBuffer(), result.length());
}

来週休暇になりますが、帰国したらこのパッチをWebKitチームに提出する予定です。パッチを（願わくば）受け入れると、Chromiumは通常の更新プロセスの一部としてパッチを取り込む必要があります。

元のコード here 、パッチを適用したリビジョン here 、および元のファイルとパッチを適用したファイルの差分 here を確認できます。最終パッチは川中伸也によって作成されました。

92
arcain

valueAsNumberなど、確認できる追加のプロパティがいくつかあります。

Chromeは、入力タイプに基づいて可能な限り最適な入力方法を提供しようとします。この場合、数値には上下の切り替えなどの追加機能もあります。

これのポイントは、数値が有効でない場合、エラーがあることを検出し、スタイル設定input[type=number]:invalid { background-color: red; }

5
Kinlan

あなたが試すことができます...

<input type="text" pattern="[0-9]*" value="123456" />

これは、デスクトップおよびiPhone上のFirefox 4で0-9のエントリを強制します。私はChromeを試してみませんが、同じことをする必要があります。

5
gdt

数値は、新しいHTML5入力タイプの1つです。電子メール、日付、時刻、URLなど、これらの負荷があります。ただし、これまでのところChromeのみが実装されています。

HTML5入力タイプの詳細については、 http://diveintohtml5.ep.io/forms.html

Chromeで無効にする場合は、ユーザーデバイスがハンドヘルドの場合、テキストのままにして番号に変更できます。ユーザーデバイスのスニッフィングが間違った結果を与える場合、それは使いやすさのキラーではないので、問題はないはずです。

3
Dan Blows

この同様の質問 については私の回答を参照してください。

<input type="tel" />は、現在この落とし穴を避けるために最も論理的です。他のオプションは興味をそそられ、私にとっては少し新しいものです（pattern属性のように）が、デザインには満足できないことがわかりました。ヒルトン向けに完成したモバイルアプリケーションのスクリーンショットを見ることができます こちら （最初に参照した回答に実際に表示されています）。

2
Gabriel Ryan Nahmias

これを試して：

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $('[type=number]').attr('type', 'text').attr('pattern', '[0-9]*');
}
1
tiriana

ローカライズされたフォーマットを無効にするのはなぜですか？別の形式が必要な場合は、PCのローカライズ設定を変更するだけです。なぜユーザーはnotを自分のローカル形式で数値を表示したいのでしょうか？これは間違いなくChromeのバグではありませんしかし機能です！

あなたは実際に入力として「数字」ではなく、パターン付きの「テキスト」コードを使用しているようです。他の投稿を参照してください。

0
Aristoteles

Html inputタグの「pattern」属性にプラグインできる正規表現のリストは次のとおりです。 HTML5 Pattern

パターンを使用して2桁の小数点をフォーマットする方法を次に示します。

<input type="number" pattern="\d+(\.\d{2})?" />

残念ながら、iPadではまったく正しく動作しないようです。

0
hoekma