NEW ARTICLE
Reactアプリでアクセシビリティ（a11y）を向上させる技術
  1. HOME
  2. javascript
  3. javascript F5とctrl+rでのリロードを禁止する

javascript F5とctrl+rでのリロードを禁止する

javascript F5とctrl+rでのリロードを禁止する

javascriptでF5キーとctrl+rキーをキャンセルすることでリロードを禁止させるサンプルコードとなります。

目次

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 102.0.5005.63
Javascript サンプル集はこちら

サンプルコード

「F5」キーと「ctrl+r」キーのkeydownイベント時に動作をキャンセルすることで無効化します。

let key = false;

document.addEventListener('keydown', function(e){

  if(e.key) key = true;

  if((e.which || e.keyCode) == (82 && key) || (e.which || e.keyCode) == 116) e.preventDefault();

});

document.addEventListener('keyup', function(e){
  if(e.key) key = false;
});

もしくは、以下でも可能です。

let key = false;

document.onkeydown = (e) => {

  if(e.key) key = true;

  if((e.which || e.keyCode) == (82 && key) || (e.which || e.keyCode) == 116) e.preventDefault();

};

document.onkeyup = (e) => {
  if(e.key) key = false;
};