HTML - メガネSEの仕事ノート

Webアプリケーションを開発していて、IEのショートカットキーを無効化したいことがあります。

ネットで色々検索したところ、通常、JavaScript上で押下されたキーコードで判定して「return false;」すれば無効化していますが、実際にはいくつかのショートカットキーは無効化されませんでした。

代替手段として、alert()を表示することで無効化できました。

●IE11でCtrl+OとAlt+Zのショートカットキーを無効化する

サンプルソース（jsfiddle）
https://jsfiddle.net/saimjcf/tmaqf8aw/

function onKeyDown(e) {
    
    e = e || window.event;
    
    if (e.keyCode === 79 && e.ctrlKey) {
        
        e.preventDefault();
        e.stopPropagation();
        e.returnValue = false;
        
        if ($("#enableWorkaround").is(":checked")) {
            customMethodCtrl(e.keyCode);
            alert("禁止されているCtrlキーが押下されました");
        }
        return false;
    }
    
    if (e.keyCode === 90 && e.altKey) {
        
        e.preventDefault();
        e.stopPropagation();
        e.returnValue = false;
        
        if ($("#enableWorkaround").is(":checked")) {
            customMethodAlt(e.keyCode);
            alert("禁止されているＡｌｔキーが押下されました");
        }
        else {
            
        }
        return false;
    }
    
}

function customMethodCtrl(x) {
    $("#output").append("<p>Ctrl , KeyCode = " + x + "</p>");
    return false;
}

function customMethodAlt(x) {
    $("#output").append("<p>Alt , KeyCode = " + x + "</p>");
    return false;
}

$(document).ready(function() {
    
    $(document).on("keydown", function (e) {
        onKeyDown(e);
    });
    
});

function onKeyDown(e) {

e = e || window.event;

if (e.keyCode === 79 && e.ctrlKey) {

e.preventDefault();

e.stopPropagation();

e.returnValue = false;

if ($("#enableWorkaround").is(":checked")) {

customMethodCtrl(e.keyCode);

alert("禁止されているCtrlキーが押下されました");

}

return false;

}

if (e.keyCode === 90 && e.altKey) {

e.preventDefault();

e.stopPropagation();

e.returnValue = false;

if ($("#enableWorkaround").is(":checked")) {

customMethodAlt(e.keyCode);

alert("禁止されているＡｌｔキーが押下されました");

}

else {

}

return false;

}

function customMethodCtrl(x) {

$("#output").append("<p>Ctrl , KeyCode = " + x + "</p>");

return false;

}

function customMethodAlt(x) {

$("#output").append("<p>Alt , KeyCode = " + x + "</p>");

return false;

}

$(document).ready(function() {

$(document).on("keydown", function (e) {

onKeyDown(e);

});

もっと良い方法あったら知りたい・・・

HTMLのinput要素にdisabled属性をtrueにセットすると、ユーザが値を編集できなくなるだけでなく、値そのものが使用できなくなります。つまり、submitなどのアクションでも値がサーバに送信されなくなります。

編集させたくないだけが要件の場合には、readonly属性を使用すればいいのですが、tabなどでカーソル移動する際に選択できてしまいます。できれば、カーソル移動の対象からも外したかったのでいくつか、対応方法考えました。

disabledの設定例

var elm1 = document.getElementById("…");
elm1.disabled = "true";

1 2	var elm1 = document.getElementById("…"); elm1.disabled = "true";

対応方法①送信したい値をcookieやsessionやhidden項目に退避しておく

こちらは、disabled属性がセットされたinput項目の値をcookie、session、hidden項目などにセットしてなんとかして、サーバに送信する方法です。しかし、この方法はdisabled属性がtrueの項目が決まっている場合に使える方法で、動的にdisabled属性がセットされる要素が変わる場合には使用できない方法です。

対応方法②代わりにreadonly属性を使用する

readonly属性を使用して、cssを用いてdisabledになっているように見せる方法です。こちらもおすすめですが、これだけのためにcssを書くのが嫌だったので、使用しませんでした。

対応方法③送信直前にdisabled属性をfalseに設定する

値を送信する直前にdisabled属性を解除してしまう方法で、私はこの方法を採用しました。他のモジュールへの影響が一番少なかったからです。（笑）
方法は至ってシンプルで、値を送信するボタンのonclickイベントにdisabled属性を解除する関数をセットしただけです。

// 画面表示時にdisabledにセットする。
var elm1 = document.getElementById("…");
elm1.disabled = true;

$("#btn").click(function() {
   // clickイベントでdisabledを解除 
   elm1.disabled = false;
});

// 画面表示時にdisabledにセットする。

var elm1 = document.getElementById("…");

elm1.disabled = true;

$("#btn").click(function() {

// clickイベントでdisabledを解除

elm1.disabled = false;

});

今回はユーザがタブ移動で大量の項目を入力する画面で、カーソル移動の対象にしたくなかったのでdisabled属性を使用しました。そんな要件なけれが、readonly属性で十分です(^∇^)

月	火	水	木	金	土	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

メガネSEの仕事ノート

「HTML」タグアーカイブ

IE11でCtrl+OとAlt+Zのショートカットキーを無効化する

●IE11でCtrl+OとAlt+Zのショートカットキーを無効化する

HTMLのinput要素でdisabled属性を使用する場合の注意点と対応方法

disabledの設定例

対応方法①送信したい値をcookieやsessionやhidden項目に退避しておく

対応方法②代わりにreadonly属性を使用する

対応方法③送信直前にdisabled属性をfalseに設定する

日々のSE業務で得たノウハウと趣味