【JavaScript】バックスペースキーを無効化する方法

「Backspaceキーを押すとページが戻ってしまうのを防ぎたい」という理由で、バックスペースキーの無効化を探している方は多いです。しかし結論から言うと、現在のブラウザではこの目的での無効化はほとんど不要です。

さらに、よく紹介される「ページ全体でBackspaceを止める」コードは入力欄の文字まで消せなくする有害なコードです。この記事では、現状を踏まえたうえで、本当に必要な場合の安全な方法と、そもそもの目的（入力内容を守る）を達成する別の手段を解説します。

そもそも今は無効化が不要

かつてはBackspaceキーで「ブラウザの戻る」が発生し、フォーム入力中に誤って押すとページが戻って入力内容が消える事故がありました。しかし、Chrome（2016年〜）・Edge・Firefox（2021年〜）などの現代ブラウザは、デフォルトでBackspaceによるページ移動を廃止しています。

そのため、「戻るのを防ぐためにBackspaceを無効化する」必要は基本的にありません。ナビゲーション（戻る操作）そのものを制御したい場合は、Backspaceいじりではなくブラウザの戻るボタンを無効化する方法のように History API で扱うのが正攻法です。

やってはいけない：ページ全体で一律に無効化

古い記事でよく見かける次のコードは絶対に避けてください。document 全体でBackspaceを止めるため、すべての入力欄で文字を削除できなくなります。

// このコードは input や textarea の削除まで奪うので使わない
document.addEventListener("keydown", (event) => {
  if (event.key === "Backspace") {
    event.preventDefault();
  }
});

どうしても必要なら：入力欄を除外して無効化

レガシーブラウザ対応などでBackspaceの「戻る」だけを止めたい場合は、フォーカスが入力欄にないときだけ無効化します。input・textarea・編集可能要素（contenteditable）を除外するのがポイントです。

document.addEventListener("keydown", (event) => {
  if (event.key !== "Backspace") return;

  const el = event.target;
  const isEditable =
    el.tagName === "INPUT" ||
    el.tagName === "TEXTAREA" ||
    el.isContentEditable;

  // 入力欄の外で押されたBackspaceだけ無効化する
  if (!isEditable) {
    event.preventDefault();
  }
});

これで入力欄の削除は守られ、それ以外の場所でのBackspaceだけが無効になります。event.key の扱いや keyCode（非推奨）との違いはキーボード入力を取得する方法で解説しています。

補足：厳密には、読み取り専用（readonly）や無効化（disabled）のinput でも昔は戻る挙動が起きました。気になる場合は el.readOnly / el.disabled も「編集不可」として扱い、除外条件に加えてください。

入力内容を守りたいなら beforeunload を使う

そもそもの目的が「うっかりページを離れて入力内容が消えるのを防ぎたい」なら、Backspaceを止めるより beforeunload イベントが正解です。Backspaceに限らず、戻るボタン・タブを閉じる・リロードなどあらゆる離脱で確認ダイアログを出せます。

let formIsDirty = false;

// 入力があったら「変更あり」にする
document.querySelector("form").addEventListener("input", () => {
  formIsDirty = true;
});

window.addEventListener("beforeunload", (event) => {
  if (formIsDirty) {
    event.preventDefault();      // 離脱前に確認ダイアログを表示
    event.returnValue = "";      // 一部ブラウザで必要
  }
});

こちらのほうが、Backspaceだけを塞ぐより確実にデータ消失を防げます。フォーム入力の監視はEnterキーでフォーム送信を無効化する方法のようなキー制御と組み合わせると、より堅牢なフォームになります。

アクセシビリティへの注意

よくある質問（FAQ）

まとめ

現代のブラウザはBackspaceでページが戻らないため、「戻るのを防ぐためのBackspace無効化」は基本的に不要です。よくある「ページ全体で一律に止める」コードは、入力欄の文字削除まで壊す有害なコードなので使ってはいけません。

どうしても必要なら、input・textarea・contenteditable を除外して入力欄の外でだけ無効化します。そして本来の目的が「入力内容を守ること」なら、beforeunload を使うのがもっとも確実で親切な方法です。