電話：テキスト入力用の数字キーボード

電話で数字キーボードを強制的に起動する方法はあり<input type="text">ますか？私はちょうどことに気づいた<input type="number">ことは、クレジットカード番号、ZIPコードなどに適していないので、HTML5で「浮動小数点数」のためであります

<input type="number">浮動小数点数以外の数値を取る入力に対して、の数値キーボード機能をエミュレートしたいと思います。inputそれを行う別の適切なタイプはありますか？

できます<input type="text" pattern="\d*">。これにより、数字キーボードが表示されます。

詳細については、こちらを参照してください：iOS向けのテキスト、Web、および編集プログラミングガイド

<form>
  <input type="text" pattern="\d*">
  <button type="submit">Submit</button>
</form>

2015年半ばの時点で、これが最良の解決策であると信じています。

<input type="number" pattern="[0-9]*" inputmode="numeric">

これにより、AndroidとiOSの両方でテンキーが提供されます。

また、上向き/下向きの矢印ボタンとキーボードに適した上向き/下向きの矢印キーの増分により、期待されるデスクトップの動作を提供します。

このコードスニペットで試してください。

<form>
  <input type="number" pattern="[0-9]*" inputmode="numeric">
  <button type="submit">Submit</button>
</form>

とを組み合わせるtype="number"とpattern="[0-9]*、どこでも機能するソリューションが得られます。また、将来のHTML 5.1で提案されているinputmode属性との前方互換性があります。

注：パターンを使用すると、ブラウザーのネイティブフォーム検証がトリガーされます。novalidate属性を使用してこれを無効にするか、title属性を使用して検証が失敗した場合のエラーメッセージをカスタマイズできます。

先行ゼロ、カンマ、または文字（国際郵便番号など）を入力できるようにする必要がある場合は、このわずかなバリエーションを確認してください。

クレジットとさらに読む：

http://www.smashingmagazine.com/2015/05/form-inputs-browser-support-issue/ http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios-テンキー/

私は、少なくとも「パスコード」のようなフィールドの場合、のようなことを行うと、最終的に<input type="tel" />最も信頼性の高い数値指向のフィールドが生成され、オートフォーマットがないという利点もあることがわかりました。たとえば、最近ヒルトン用に開発したモバイルアプリケーションでは、次のようにしてしまいました。

...そして私のクライアントは非常に感銘を受けました。

<form>
  <input type="tel" />
  <button type="submit">Submit</button>
</form>

type="email"またはtype="url"を使用すると、少なくともiPhoneなどの一部の電話でキーボードが表示されます。電話番号については、を使用できますtype="tel"。

を使用<input type="text" pattern="\d*">して数字キーボードを表示するのは危険です。FirefoxとChromeでは、パターン内に含まれる正規表現により、ブラウザはその表現への入力を検証します。パターンと一致しないか、空白のままにすると、エラーが発生します。他のブラウザでの意図しないアクションに注意してください。

<input type="text" inputmode="numeric">

ではINPUTMODEあなたはブラウザにヒントを与えることができます。

type="number"セマンティックWebページに最適だと思います。キーボードを変更するだけの場合は、type="number"またはを使用できますtype="tel"。どちらの場合も、iPhoneはユーザー入力を制限しません。ユーザーは必要な文字を入力（または貼り付け）できます。唯一の変更は、ユーザーに表示されるキーボードです。これ以上の制限が必要な場合は、JavaScriptを使用する必要があります。

私にとって最良の解決策は：

整数の場合、AndroidとiPhoneで0-9パッドが表示されます

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d]*" />

また、Firefox / chrome / safariのスピナーを非表示にするためにこれを実行することもできます。ほとんどのクライアントは醜く見えると思います

 input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
 }

 input[type=number] {
      -moz-appearance:textfield;
 }

カスタム検証を行う場合は、フォーム要素にnovalidate = 'novalidate'を追加します

結局のところ、結局のところ浮動小数点数が実際に必要な場合に備えて、好きな精度でステップを実行すると、「。」が追加されます。アンドロイドへ

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d\.]*" step="0.01" />

2018年：

<input type="number" pattern="\d*">

AndroidとiOSの両方で機能しています。

Android（^ 4.2）とiOS（11.3）でテストしました

あなたはこのように試すことができます：

<input type="number" name="input">
<input type="submit" value="Next" formnovalidate="formnovalidate">

ただし、注意してください。入力に数値以外のものが含まれている場合は、サーバーに送信されません。

すべての状況で最適なタイプを見つけることができませんでした。デフォルトで数値エントリ（たとえば、「7.5」のエントリ）に設定する必要がありましたが、特定の時間にテキスト（たとえば、「pass」）を許可しました。ユーザーは数字キーパッド（たとえば7.5の入力）を望んでいましたが、時々テキスト入力が必要でした（たとえば「パス」）。

むしろ、フォームにチェックボックスを追加して、ユーザーが入力（id = "inputSresult"）をtype = "number"とtype = "text"の間で切り替えられるようにすることでした。

<input type="number" id="result"... >
<label><input id="cbAllowTextResults" type="checkbox" ...>Allow entry of text results.</label>

次に、クリックハンドラーをチェックボックスに接続し、上のチェックボックスがオンになっているかどうかに基づいて、テキストと数値の間でタイプを切り替えます。

$(document).ready(function () {
    var cb = document.getElementById('cbAllowTextResults');
    cb.onclick = function (event) {
        if ($("#cbAllowTextResults").is(":checked"))
            $("#result").attr("type", "text");
        else
            $("#result").attr("type", "number");

    }
});

これはうまくいきました。

 <input type="text" inputmode="decimal">

テンキーを使用してテキスト入力を提供します

これを試して：

$(document).ready(function() {
    $(document).find('input[type=number]').attr('type', 'tel');
});

参照：https : //answers.laserfiche.com/questions/88002/Use-number-field-input-type-with-Field-Mask