web-dev-qa-db-ja.com

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

<input type="text">のために電話で数字キーボードを強制的に起動する方法はありますか？ HTML5の <input type="number"> は「浮動小数点数」用であるため、クレジットカード番号、郵便番号などには適していません。

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

androidioskeyboardnumbershtml-input
151
Tami

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

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

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

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

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

これにより、AndroidとiOSの両方でテンキーが使用できます。

enter image description here

また、上向き/下向き矢印ボタンとキーボードフレンドリーな上向き/下向き矢印キーのインクリメントにより、デスクトップの動作を期待できます。

enter image description here

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

<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-numeric-keypad /

121
Aaron Gray

少なくとも「パスコード」のようなフィールドでは、<input type="tel" />のような処理を行うと、最も信頼性の高いnumber-orientedフィールドが生成され、自動フォーマットなし。たとえば、最近ヒルトン用に開発したモバイルアプリケーションでは、次のようになりました。

iPhone Web Application Display with an Input Tag Having a Type of TEL which Produces a very Decent Numeric Keyboard as Opposed to Type Number which is Autoformatted and Has a Somewhat Less Intuitive Input Configuration

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

<form>
  <input type="tel" />
  <button type="submit">Submit</button>
</form>
53
Gabriel Ryan Nahmias

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

11
Niklas

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

8
Mike

私にとって最良の解決策は次のとおりです。

整数の場合、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'を追加します

結局のところ、実際に浮動小数点数が必要な場合に備えて、あなたが好きな精度にステップすると、「。」が追加されますAndroidへ

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

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

3
Cat Chen

2018年：

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

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

Android（^ 4.2）およびiOS（11.3）でテストしました

2
Shalika Akalanka

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

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

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

0
alexwenzel

これを試して：

$(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

0
Luiz Fernando Corrêa Leite

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

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

<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");

    }
});

これは私たちにとってうまくいきました。

0
Jeff Mergler