「JavaScript」タグアーカイブ

SE業務

[JavaScript] ブラウザの戻るボタンを無効化する

2019年6月23日

ブラウザの戻るボタンを無効化する方法を調査したので、そのときのメモ。

クライアントサーバシステムだった社内システムをWEBシステムにリプレースする案件でこういった要件を見かける。顧客は、クラサバのときの使い心地をそのままにWEBシステムにしようとするので、こんな要件がでてしまう。

少し前まで完璧にはできなかったようだが、最近になってHTML5+jQueryの組みあわせでできるようになったみたい。

〇サンプルソースはこちら

https://jsfiddle.net/saimjcf/5atzrp26/

「RUN」を押下すると、JavaScriptがロードされるので、ブラウザの戻るボタンを押してみてください。無効になっていて、画面遷移が発生しないはず。

この中でブラウザの戻るボタンを無効化しているのは以下の部分です。

// 戻るボタンを制御
history.pushState(null, null, null);
$(window).on("popstate", function (event) {
    if (!event.originalEvent.state) {
        history.pushState(null, null, null);
        return;
    }
});

// 戻るボタンを制御

history.pushState(null, null, null);

$(window).on("popstate", function (event) {

if (!event.originalEvent.state) {

history.pushState(null, null, null);

return;

}

});

〇仕組みの話

まず、上記サンプルソースが画面上にロードされると、history.pushState(null, null, null)メソッドでブラウザの履歴の先頭に新しい履歴を一つ追加します。このとき第3引数がnullなので、追加された履歴は自分自身を指していることになります。

そして、戻るボタンが押下されたら”popstate”イベントが発生しますので、その”popstate”イベントが発生したときの処理として、再度history.pushState(null, null, null)を実行して、ブラウザの履歴の先頭に新しい履歴を一つ追加します。要は、ブラウザの履歴を操作しています。

hisotry APIの詳細はこちら
https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Manipulating_the_browser_history

※サンプルソースは、Firefox、Google Chrome、IEのみで動作確認しました。

SE業務

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

2017年5月2日

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);

});

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

SE業務

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

2015年9月27日

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の仕事ノート

「JavaScript」タグアーカイブ

[JavaScript] ブラウザの戻るボタンを無効化する

〇サンプルソースはこちら

〇仕組みの話

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

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

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

disabledの設定例

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

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

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

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