7

目標: 最小限のハックで、モバイル タッチ ベースのデバイスに数値キーボードを表示するためのクロスプラットフォーム ソリューションを見つけること。

問題:

主に数値データを含むデータ入力フォームを使用する通常の Web アプリケーションがあります。ユーザーがモバイル デバイスでサイトを操作するとき、ほとんどの標準的なキーボードでは、英字から数字に切り替えるには 2 回押す必要があるため、数字の仮想キーパッドを表示したいと考えています。入力要素の「タイプ」属性を設定することで、別のキーボードをトリガーできることを知っています：

type=number: これは、iOS/Safari でうまく機能します。プラットフォーム上の他のブラウザについては不明です。

Android では、これにより、さまざまなブラウザーで一貫して正しいキーボードが表示されず、多くの場合、入力に不要なエレベーター ボタンが表示されます。CSSでこれらをオフにするきれいな方法をまだ見つけていません。

type=tel: これは iOS/Safari でほぼ動作しますが、電話のキーボードには小数点ボタンがありません。

ページに余分な UI 要素を追加することなく、複数の Android ブラウザーでうまく機能するようです。

私の現在の解決策はハックで単純です。数値の検証に既に使用しているクラスに基づいて、数値を含む必要がある各テキスト要素を、検出された OS/ブラウザーに基づいたnumberまたはタイプのいずれかである新しい入力に置き換えます。tel

var isAndroid = navigator.userAgent.match(/android/i) ? true : false;
var isIOS = navigator.userAgent.match(/(ipod|ipad|iphone)/i) ? true : false;

if (isAndroid || isIOS) {
    var useNumberType = (isIOS ? true : false); //iOS uses type=number, everyone else uses type=tel
    jQuery("input.num").each(function () {
        var type = (useNumberType ? "number" : "tel");
        var html = this.outerHTML;
        html = html.replace(/(type=\"?)text(\"?)/, "$1" + type + "$2");
        this.outerHTML = html;
    });
}

ブラウザー検出を使用せず、実行時にその場で入力を変更しないことをお勧めします。基本的に同じことを行うサーバー側に http モジュールを導入することもできますが、それは実質的に優れているわけではありません。これに対する CSS 呼び出しがないことにショックを受けました。

ページに奇妙な UI 要素を追加せずに、すべてまたはほとんどのタッチベースのモバイル デバイスで動作する、小数点ボタン付きの数値キーボードを取得するより良い方法はありますか?

- - - - - - - アップデート

私が本当にやりたいことを実行する方法はないと思います。つまり、単一の入力スタイルまたは入力タイプをセットアップして、デスクトップ ブラウザーとすべての主要なモバイル タッチ ベースのプラットフォームでうまく機能するようにすることです。私は、outerHTML を介して入力全体を書き直すのではなく、jQuery を介してではなく、直接 DOM 呼び出しを介して入力の型を変更することにしました。効果に大きな違いはないと思いますが、コードは少しすっきりしています。デスクトップで入力タイプを変更していないので、属性に対する IE の読み取り専用制限について心配する必要はありません。

理想的には、サーバー側でこれを処理して、要求を行うデバイスに必要な形式ですべてがブラウザーに送信されるようにすることをお勧めします。しかし今のところ、新しいコードは次のようになります。

var isAndroid = navigator.userAgent.match(/android/i) || navigator.platform.match(/android/i) ? true : false;
var isIOS = navigator.userAgent.match(/(ipod|ipad|iphone)/i) ? true : false;

if (isAndroid || isIOS) {
    var useNumberType = (isIOS ? true : false); //iOS uses type=number, everyone else uses type=tel
    jQuery("input.num").each(function () {
        var type = (useNumberType ? "number" : "tel");
        if (this.type == "text") {
            this.type = type;
        }
    });
}
4

1 に答える 1

2

ヒント: モバイルで作業する場合は、ユーザー エクスペリエンスを妨げないようにしてください。これは、組み込みのキーパッドをそのまま維持することを意味します。

一部のユーザーは、モバイル デバイス/ブラウザーで Javascript を無効にしている場合もあります。

ここですべきことは、ブラウザに HTML ヒントを含めることです。このようにして、モバイル ブラウザーは、自分が操作しているコンテンツの種類を認識する必要があります。

HTML5 には<input>、最新のすべてのモバイル デバイス (およびほとんどの最新のブラウザー) でサポートされる必要があるいくつかの新しいコンテンツ タイプが含まれています。

完全なリストはこちらでご覧いただけます。

具体的に欲しいのは以下です。

古いコード:

Phone number: <input type="text" name="phone" />

新しいコード:

Phone number: <input type="tel" name="phone" />

現在 をサポートしているブラウザーがあるかどうかはわかりません。その"tel"ため、次のようなものを使用できます。

Phone number: <input type="number" name="phone" min="1000000000" max="9999999999" />

これはちょっとしたハックですが、もう 1 つのオプションです。

これは、物事を行うためのはるかに単純で保守しやすい方法であり、ユーザーにとってより良い方法です。

ご不明な点がございましたら、お知らせください。これが質問に直接答えているわけではないことはわかっていますが、私の意見では、今のところはより良い方法です。:)

編集：

各ブラウザーでこれを回避する方法として、JS/Jquery を使用してユーザー エージェントをチェックする方法があります。これを行う方法が正確にはわかりませんが、.NET で行う方法と、JQuery を使用して各要素の CSS を変更する方法に関するチュートリアルを次に示します。

編集編集!:

コードを次のように変更してみてください。

var isAndroid = navigator.userAgent.match(/android/i) ? true : false;
var isIOS = navigator.userAgent.match(/(ipod|ipad|iphone)/i) ? true : false;

if(isIOS)
    $(.phoneInput).attr("type", "tel");
if(isAndroid)
{
    $(.phoneInput).attr("type", "number");
    $(.phoneInput).attr("min", "1000000000");
    $(.phoneInput).attr("max", "9999999999");
}

これがすべてうまくいくことを願っています！テストの結果によっては、2 つのステートメントを切り替える必要がある場合がありifます。

于 2012-05-21T22:53:53.877 に答える