[ jQuery ] ブラウザの再表示 ( F5 ) や戻る ( Backspace ) のイベントを無効化する

Tweet

Pocket

Web アプリを作成していると、どうしてもユーザ操作の再表示( F5 )や、戻る( Backspace ) の操作を行って欲しくない場合があります。そのような時のために ｊQuery によって簡単に F5 や Backspace のキーダウンイベントを無効させることができますので、サンプルを掲載します。

ただし、ユーザーの誤操作などによる操作性や利便性を上げるためにするためのイベントの無効化は良いとは思いますが、イベントを無効化しなければ正常に動作しないという、ネガティブな理由では「却下」されることもあるとは思います。多くはネガティブな理由であるかもしれませんが。。。

再表示( F5 )や戻る( Backspace ) の無効化

$(function () {

    $(document).keydown(function(event){

        // クリックされたキーコードを取得する
        var keyCode = event.keyCode;

        // F5 の場合は falseをリターン
        if(keyCode == 116) {
            console.log("F5");
            return false;
        }

        // バックスペースキーを制御する
        if(keyCode == 8){
            console.log("Backspace");
            return false;
        }
});

さらに、管理人は知らなかったのですが、「 Alt + ← 」 や 「 Alt + → 」 のキー操作でページを進めたり、戻るせたりすることができます。

    // Alt キーが押されているかを取得する
    var altKey = event.altKey;

    if(altKey) {
        if(keyCode == 37 || keyCode == 39){
            console.log("[Alt + →] または [Alt + ←]");
            return false;
        }
    }

Backspace のキーイベントを無効にするとテキストなどの入力エリア内でのバックスペースも無効化されてしまいます。 このような場合には、キーが押されたオブジェクトによって無効化するか否かを判断する必要があります。

    // キーイベントが発生した対象のオブジェクト
    var targetObj = event.target;

    /*
     * 対象オブジェクトの属性で無効化するかを判断する項目例
     * ----------------------------------------------------------------
     * targetObj.tagName == "input"  タグ名で判断する(その他 textareaなど)
     * targetObj.type == "text"      タイプで判断する(その他 passwordなど)
     * targetObj.readOnly == fasle   読み取り専用かどうか
     * targetObj.disabled == fasle   有効かどうか
     */

Tweet

Pocket