2011-12-08 16 views
29

Chrome 15では、要素をテキストフィールドとして使用すると、入力された数字が検証ルール(たとえば、最小、最大)を破らなくても先行ゼロ(例:011)が削除されます。フォーカスが失われた後にフィールドにゼロを残す属性がありますか?このアプリケーションは、国際電話プレフィックスなどの数値データです。HTML5入力タイプ=数字は先行ゼロを削除します

+0

このフォームはどのように構造化されていますか?数字は1つのテキストフィールドに入れられますか、別のテキストフィールドに入力されますか? – Edwin

+0

フォームはかなり標準的なフォームです。テキスト、ラジオ、小切手、日付、数字を含むさまざまな入力を持つ複数のフィールド。この特定のケースでは、私は郵便番号のような私の数値フィールドに数字を使用したい – Evan

答えて

26

<input type="tel">がこの正確な目的のために導入されました。これはHTML5の新しい入力タイプの1つです。

+3

私は提案を感謝します!しかし、先行ゼロが重要な郵便番号とその他の情報フィールドもあります。私はマークアップをできるだけセマンティックにしたいと思いますし、特定の用途にかかわらずゼロを確実にする方法を探しています。一般的なタイプ=入力 – Evan

+0

'number'は明らかに何もしませんあなたは必要とし、 'tel'は行います。先頭の数字を削除しない属性があるかどうか尋ねました。まあ、 'tel'が答えです。また、入力の種類はセマンティクスやユーザーインターフェイス(キーボードがスマートフォンなどに表示される)についてはあまりありません。 –

+0

'\ d {5} - ?(\ d {4})? 'のパターンでこれを使用すると、郵便番号の場合に効果的です。 – Lefka

4

WHATWGが私にIRCで提供した答えは、数値ではない数値(例:float/intではない)のデータで、数値であるため、一般的にテキストは正しい入力タイプです。指定された入力タイプ(電話番号、日付など)が既に存在する場所で何かを使用している場合、expectionが行われます。

入力タイプ=数字は、数字(int)の入力にのみ使用し、数字(郵便番号など)を使用するデータには使用しないでください。あなたのためにそれを行う必要があります

+10

彼らのアイボリータワー教授法はすべてうまくいいですが、現実の世界に戻って、非整数の非フロートデータの場合でも、数字のキーボードをモバイルユーザーに提示する必要があることがよくあります。 (例:クレジットカード番号、数値のパスコード)まだ 'inputmode'属性を実装しているブラウザは1つではないので(2015年時点で!)、これを行うための唯一の方法は' type'属性です。 WHATWGの勧告に従う可能性のある実用的な効果は、モバイルユーザのUIを壊すことであり、ドグマに従うことの満足度以外は何も得られません。 –

37

<input type="text" pattern="[0-9]*" ...

。 iPhoneと私がテストしたより良いAndroid携帯電話のテンキーパッドを起動します。

+2

携帯電話のキーボードで聞くことができる電話のエキストラ( '#'や '*'など)を望まない場合は、これが本当の答えです。 –

+13

これは、Android搭載のChrome搭載のテキストキーパッドです。 – chhantyal

+1

これはIEで動作しますか? –

14

私は携帯電話のブラウザのためにそれを必要とし、私はこのような両方のソリューションのミックスを使用:iOSの、数字のキーボードで

<input type="tel" pattern="[0-9]*"> 

は、Android携帯電話上のに対し、利用可能な唯一の数字(なし#または*記号)で表示されます、 "tel"は正しく解釈されますが、パターンはありません(私が持っているいくつかの電話機にはまだありません)。

アンドロイドブラウザで「パターン」属性の実装が開始されると、アンドロイドでも正しく動作するはずです(the whatwg spec suggests)。

それまでは、入力に数字以外の文字がないかチェックして削除する必要があります。 javascriptの置き換え(/ [^ 0-9 *]/g、 '')は便利です。

これが役に立ちます

+0

それはイオスとアンドロイドの両方でうまくいきます... :) – Kailas

関連する問題