web-dev-qa-db-ja.com

モバイルデバイス用のHTML <input type = "number">の最適な設定

私は他の多くの質問を読んでいます。たとえば、 [1][2][3] などですが、問題は解決しません。

私は、モバイルデバイス用のHTML inputを作成するための「最もクリーンな」方法を見つける必要があり、これらの3つのルールすべてを尊重します。

  1. 主に数値、整数または浮動小数点に適しています

  2. モバイルデバイスの数字キーパッド、Chrome for AndroidおよびSafari for iOSに奇妙な追加キーなしで表示

    enter image description here

  3. HTML5ルールを完全に尊重します（W3バリデーターによってテスト済み）




何を試しましたか？

私はこれらのソリューションに出会いましたが、どちらのテーマも上記の3つのルールを累積的に尊重していません。

解決策1

<input type="text" pattern="\d*" />

enter image description here

このソリューションは、iOSでの作業とw3バリデーターによってテストされたHTMLルールを満たすにもかかわらず、Chrome Android QWERTYキーボードを備えたフルキーパッドで提供されます。


解決策2

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

このソリューションは、iOSとAndroid Chromeの両方のシステムで機能し、両方のシステムで数字キーパッドを表示しますが、HTML検証エラーをスローします

属性patternは、入力タイプが電子メール、パスワード、検索、電話、テキスト、またはURLの場合にのみ許可されます。


解決策3

<input type="number" />

このソリューションはHTMLテストに合格し、ChromeではNiceと表示されますが、iOSキーパッドでは不要なキーがいくつか表示されます

enter image description here


解決策4

多くの開発者がこのソリューションを使用していることがわかります

<input type="tel" />

ただし、Android Chromeでテストされているように、ドット記号（。）は許可されておらず、キーには文字が含まれているため不必要です。

chrome input type="tel"

mobile-safarihtml-inputandroid-keypadnumeric-keypadiphone-keypad
9
João Pimentel Ferreira

あなたの特定のタスクのために私は並外れた解決策を持っています：type="text"とパターンを入力してから、type属性を修正するJavaScriptを追加します。 W3バリデーターを通過するために行います。

ソリューション

// iOS detection from: stackoverflow.com/a/9039885 with explanation about MSStream
if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream)
{
    var inputs = document.querySelectorAll('input[type="number"]');
    for(var i = inputs.length; i--;)
        inputs[i].setAttribute('pattern', '\\d*');
}

<input type="number" />

私のソリューションは、3つのルールすべてを尊重します（W3バリデーターを含む）。

しかし、この場合（パターンあり）のiOSでは、数値キーパッドを使用して浮動小数点数を配置することはできません。iOSではポイントを含む数字のキーパッドがないためです。 Androidこの可能性があります。浮動小数点数のテンキーが必要な場合は、iOS向けに次のような追加のソリューションを作成する必要があります。

 <input type="number" />
3
Bharata

さらに別のオプションがあります：<input type="text" inputmode="numeric" pattern="[0-9]*">

GOV.UK Design Systemチームが数値の入力タイプを変更した理由 は一読の価値があります。

あなたがまだ行きたいなら<input type="number">ルート4への素晴らしい解決策があります-スクロール- 数値入力スピナーをオフにする 。

それぞれの解決策にはいくつかの欠点があるようですが、最適なものは、収集しようとしているデータのタイプ、パスポート番号と誰かの年齢とアイテム数によって異なると思います。

私が見つけたこのソリューションの欠点は次のとおりです。

  • 入力値が数値ではなくテキストになったため、JSで追加の解析が必要になる場合があります。
  • デスクトップブラウザでは、入力はアルファベット文字を受け入れ、フォームは無効になりますが、これを処理して関連するユーザーフィードバックを表示する必要があります（フレームワークを使用している場合は自動で行われる場合があります）
  • 最新のモバイルブラウザでのみサポートされています。 iOS 12.2のSafari（2019 ish）（ spec を参照）
1
Simon Ness

@Alex Chartersの提案に従って、jQueryを使用してこのソリューションを提案します。jQueryはより高速でエレガントなようです。

このコードをページの「onload」に追加します

//shows numeric keypad on iOS mobile devices
if(getMobileOperatingSystem() === "iOS"){
    $('input[type="number"]').attr("pattern", "\\d*");
}

オペレーティングシステムの検出機能は次のとおりです 他から取得SO回答 ：

/**
 * Determine the mobile operating system.
 * This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'.
 *
 * @returns {String}
 */
function getMobileOperatingSystem() {
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;

      // Windows Phone must come first because its UA also contains "Android"
    if (/windows phone/i.test(userAgent)) {
        return "Windows Phone";
    }

    if (/Android/i.test(userAgent)) {
        return "Android";
    }

    // iOS detection from: http://stackoverflow.com/a/9039885/177710
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        return "iOS";
    }

    return "unknown";
}

私はテストし、それは3つのルールを満たしています。オペレーティングシステムがiOSの場合、pattern属性が追加されます。上記のコードは入力数に応じて処理に時間がかかるため、iOSオペレーティングシステムを想定している場合にのみ実行されるため、デフォルトでは実行しません。

0
João Pimentel Ferreira