web-dev-qa-db-ja.com

入力テキストを使用してiPhoneで数字キーボードを表示する

input type="number"を使用すると、次のように数字キーボードが表示されることに注意してください。

enter image description here

input type="text"を使用して同じテンキーを表示することはできますか？私 しない 値に小数点以下の桁数が含まれる可能性があるため、pattern="\d*"を使用してテンキーを表示したい。

input type="text"の代わりにinput type="number"を使用したい理由は、数値フィールドに数値以外を入力すると、値を取り戻せないためです。たとえば、入力した場合 ABC、自動的に空になります。この種の制御では、input type="text"を使用する方が簡単なようです。

htmlcordovajquery-mobile
13
red23jordan

入力が真の数値、整数、または10進数の場合は、HTML5 type="number"入力を使用します。これにより、Androidデバイス（Windows Phoneも想定）で正しいキーボードが表示されます。

次に、その属性にpattern="[0-9]*"を配置して、iOSで特別な数字キーパッドを強制するのがコツです。ご了承ください：

  1. pattern属性はtype = "number"フィールドでは実際には無効です！および
  2. これは[〜＃〜] only [〜＃〜] iOSテンキーを取得する方法です。アルファキーボードの数字セクション（上のスクリーンショットのように）と真の数字キーボードの違いを確認してください。

iOS number keyboards compared

最後に、真の数値ではない入力にはタイプ番号フィールドを使用しないでください（たとえば、先行ゼロのある郵便番号や、コマまたはスペースのある製品コード）。数値入力フィールドは、真の数値ではない値を送信することはできません。 （ブラウザ/デバイスによって異なります）

13
davidelrizzo

このコードを使用します：

<input type="number" pattern="[0-9]*" />
3
Behnam Mohammadi

IOSのAppleで提供される数字キーボードは悲しい冗談です。しかし、これは次の方法で修正できます。

inputmode="decimal"

もちろん、Androidでも問題なく動作します。

:)

2
Jeff Monteiro

テンキーを表示できるタイプは他にもあります。

Type = "number"を使用すると、何もできません。数字以外は受け付けません。ただし、type = "tel"を使用する場合、それは醜いハックですが、機能します。

これが私の郵便番号の例です：

<input type="tel" id="Address_ZipCode" class="Zip-code" pattern="^\d{2}-\d{3}$" maxlength="6">

ただし、一部の画面キーボードでは「-」キーに問題があります。JavaScriptで指定された文字数の後にダッシュを追加すると、次のようにこの問題を回避できます。

// Zip Code dashes
$('input[type="tel"].zipCode').keyup(function(event) {
    var t = event.target, v = t.value;
    if (v.length == 2) { t.value = v + '-'; }
});

（jQueryを許してください）。 type = "tel"を使用する代わりに、type = "text"とpatternプロパティを使用できますが、まだテストしていません。ほとんどの場合、ほとんどのブラウザでは機能しません。

1
Harry

今のところ、その解決策は見つかりませんでした。

ただし、考えられるトリックの1つは、type = "number"を使用し、javascriptでdocument.getElementById（ "element"）。type = "text";を使用して変更することです。

ただし、これによりABCもクリアされますが、数値のコンマと小数は受け入れられます。

0
Venkat Reddy

この回避策を試してください。私のために働いた。

タイプを数字に変えてから、テキストに戻ります。これにより、最初の小道具の変更時にiosが数値キーボードに切り替わります。 setSelectionRangeは、入力値を選択するためのものです。

$(function(){

    $("input[type='text']").on('mouseup', function(e){
        e.preventDefault();
    });

    $("input[type='text']").on('focus click', function(e){
        $(this).prop('type', 'number');
        var obj = $(this);
        setTimeout(function(){
            obj.prop('type', 'text');
            document.getElementById(obj.attr('id')).setSelectionRange(0, 9999);
        }, 50);     
    });
});
0
Jhonatan Muller