web-dev-qa-db-ja.com

iPhone / iOS：郵便番号用のHTML 5キーボードの提示

HTML 5入力（つまり<input>タグ）のモバイルデバイスに異なるキーボードを表示するためのいくつかのトリックがあります。

たとえば、一部はAppleのWebサイトに記載されています Webビュー用のキーボードの構成 。

enter image description hereenter image description here

これらは使いやすさには優れていますが、国際郵便番号（ほとんどが数字ですが、文字は許可されています）の入力に関しては、いくつかの貧弱なオプションが残っています。ほとんどの人はpattern="\d*"トリックを使用して数字キーボードを表示することをお勧めしますが、文字入力はできません。

type="number"入力タイプは通常のキーボードを表示しますが、数値レイアウトにシフトします。

enter image description here

これはiOSデバイスではうまく機能しますが、Chromeは入力が数字でなければならないと考え、入力の動作（値の増減）さえも変更します。

enter image description here

iOSをデフォルトで数値レイアウトに設定する方法はありますが、それでも英数字入力は許可されますか？

基本的に、type="number"のiOSの動作が必要ですが、デスクトップブラウザーの通常のテキストフィールドのように動作するフィールドが必要です。これは可能ですか？

UPDATE：

IOSのユーザーエージェントをスニッフィングし、type="number"入力タイプを使用することはオプションではありません。 type="number"は、郵便番号などの文字列値用ではなく、郵便番号にとって理想的ではない他の副作用（先行ゼロの削除、コンマ区切り文字など）があります。

iosiphonehtml5inputkeyboard
65
Ryan McGeary

これは機能しますか？

HTML：

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

これにより、Android/iOS電話ブラウザーでニース数字キーボードが使用可能になり、デスクトップブラウザーでブラウザーフォーム検証が無効になり、矢印スピナーが表示されず、先頭のゼロが許可され、デスクトップブラウザーとiPadでコンマと文字が許可されます。

Android/iOS電話：

enter image description here

デスクトップ：

enter image description here

iPad：

enter image description here

35
Aaron Gray

ブラウザには現在、郵便番号やクレジットカード番号などの数値コードを表す適切な方法がありません。最良の解決策は、type='tel'を使用することです。これにより、数字キーパッドが使用でき、デスクトップに任意の文字を追加できます。

タイプtextおよびpattern='/d'は、数字キーパッドを提供しますが、iOSのみです。

inputmode と呼ばれる属性のHTML5.1提案があり、タイプに関係なくキーパッドを指定できます。ただし、現在、どのブラウザでもサポートされていません。

これらのタイプの入力に対して Webshim polyfillライブラリに polyfillメソッド があることもお勧めします。

9
davidelrizzo

クイックGoogle検索が見つかりました このStackoverflowの質問 。

HTML

<input type="text">

Javascript

$('input[type="text"]').on('touchstart', function() {
   $(this).attr('type', 'number');
});

$('input[type="text"]').on('keydown blur', function() {
   $(this).attr('type', 'text');
});

フォームが検証される前に入力タイプが切り替えられ、値を台無しにすることなく正しいキーボードが表示されます。 iOSでのみ実行する場合は、おそらくユーザーエージェントを使用する必要があります。

iOS検出時のStackoverflow

8
seaside98

これにより、デフォルトでiosキーボードの数字側が表示され、アルファベット側に切り替える機能が維持されます。 html入力タイプが変更されると、デバイスは適切なタイプに一致するようにキーボードを変更します。

(function ($) {
    var control = $('#test2');
    var field = $('#test1');

    control.bind('click', function () {
        if (control.is(':checked')) {
            field.attr('type', 'text');
        } else {
            field.attr('type', 'number');
        }
    })
}(jQuery));

<input type="number" id="test1" value="123" />
<input id="test2" type="checkbox" />Change

enter image description here

代替デモ： http://jsfiddle.net/davidcondrey/dbg1L0c0/3/embedded/result/

大きな数値形式のキーボード（電話スタイル）が必要な場合は、それに応じてコードを調整できますが、引き続き機能します。

(function ($) {
    var control = $('#test2');
    var field = $('#test1');

    control.bind('click', function () {
        if (control.is(':checked')) {
            field.attr('type', 'text');
        } else {
            field.attr('type', 'tel');
        }
    })
}(jQuery));

<input type="tel" id="test1" value="a" />
<input id="test2" type="checkbox" />Change

enter image description here

5
davidcondrey

IOS 11におけるこの質問の更新。数字タイプの入力にパターン属性（pattern="[0-9]*"）を追加するだけで、数字キーパッドを取得できます。

以下は期待どおりに機能します。

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

これも機能します。

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

@davidelrizzoは回答の一部を投稿しましたが、@ Miguel Guardoと@turibeのコメントは全体像を示していますが、見逃しがちです。

4
Mark Tomlin

これを試して：

<input type="text" name="postalcode" class="js-postal">
<script src="https://code.jquery.com/jquery-2.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
  if('ontouchstart' in window) { // ensure we are in touch device.

    $('input.js-postal').on('focus', function() {
      var $this = $(this);

      // memorize current value because...
      var val = $this.val(); 
      // this may cause reset value.
      $this.attr('type', 'number'); 

      setTimeout(function() {
        // Asynchronously restore 'type' and value
        $this.attr('type', 'text');
        $this.val(val);
      }, 0);
    });
  }
});
</script>

私はこれが非常にハック的な方法であることを知っていますが、これは明らかに動作します。
ただし、Androidデバイスではテストしていません。

これは、inputに数字以外の文字が含まれている場合に値をリセットするため、$this.attr('type', 'number')の場合に少し顕著なグリッチが発生する可能性があることに注意してください。

この答え :)から基本的なアイデアが盗まれます

0
rintaro