Html5ページで携帯電話の仮想キーボードのポップアップを無効化する方法

私は仕事で次の要件を持っている、入力ボックスをクリックすると、カスタムポップアップウィンドウをポップアップする、入力ボックスは、入力タグです。

しかし、モバイルでは、入力はデフォルトで電話の仮想キーボードをトリガーします。電話の仮想キーボードがポップアップしないようにするにはどうすればよいでしょうか。一つは、入力にreadonlyプロパティを追加すること、もう一つは、入力イベントハンドラの前にdocument.activeElement.blur()を追加することです。

{読み取り専用 リードオンリー

readonlyメソッドは、仮想キーボードがポップアップするのを防ぐための最も簡単でエレガントな方法です。readonly属性は、入力フィールドが読み取り専用であることを指定します。読み取り専用のフィールドは、変更することができません。しかし、ユーザーはタブキーでそのフィールドに移動することができ、そのテキストを選択したりコピーしたりすることができます。

特筆すべきは、readonly属性が宣言されている限り、どんな値でも取れることで、例えば、readonly=""、readonly="readonly"、readonly="abc"はすべて同じ値です。

長所 シンプル
/{br 欠点：iOSのSafariでは有効でない（より多くのケースでテストしていない）。

document.activeElement.blur()を実行します。

これは何でしょうか？document.activeElementは、現在のページでフォーカスを持つ要素を返すWeb APIインターフェースです。つまり、ユーザーがその瞬間にキーボードのキーを押せば、その要素でキーボードイベントが発生し、プロパティは読み取り専用になります。

document.activeElementプロパティは、常に現在フォーカスを持つDOM内の要素を参照する。要素は、ユーザー入力（通常は Tab キーを押す）、コード内の focus() メソッドの呼び出し、およびページロードによってフォーカスを得ます。

その中にいくつものメソッドがあり、ブラウザのコンソールを見ると、そのメソッドがいくつもあることが分かります。

では、なぜdocument.activeElement.blur()で仮想キーボードがポップアップしなくなるのでしょうか？その理由は、inputをクリックすると、document.activeElementがDOM内のフォーカスされた要素、つまりクリックしたinputを取得し、.blur()メソッドを呼び出すからです。フォーカスされている要素を取得し、フォーカスがないように見えるように強制的にぼかす、、、あたりが感じられます。

長所 Android、iOSに対応
/{br 短所：JSコードを追加する必要がある

このコードはどこに追加されるのですか？追加には次のようなHTMLがあります。

<div class="calendar">
    <div>
        <input type="text" id="datePicker" class="date_picker" placeholder="Click to select check-in date"/>
    </div>
</div>

そして、このJSはイベント処理メソッドに追加されます。

$("#datePicker").focus(function(){
    document.activeElement.blur();
});

概要

現在の要件では、document.activeElement.blur()を使用することは本当に藪の中であり、readonlyを直接使用することが最良の解決策となります。しかし、document.activeElementは強力で、多くのことを行うことができます。

今回はHtml5ページで携帯電話の仮想キーボードのポップアップを無効にする方法について紹介しましたが、もっと関連するHtml5携帯電話のキーボードのポップアップの内容はスクリプトハウスの過去の記事を検索するか、次の関連記事を引き続き閲覧してください、今後ともスクリプトハウスをよろしくお願いします。