やりたいこと
探せばいくらでも出てきそうな、[Alt]+←とBackspaceでのブラウザバックを無効化する方法です。
ソース
window.addEventListener("keydown", function(event) {
let tagName = "";
let type = "";
let readOnly = false;
let disabled = false;
// イベント発生元要素の情報を取得
if (typeof event.target.tagName !== "undefined" && event.target.tagName !== false) {
tagName = event.target.tagName.toLowerCase();
}
if (typeof event.target.type !== "undefined" && event.target.type !== false) {
type = event.target.type.toLowerCase();
}
if (typeof event.target.readOnly !== "undefined" && event.target.readOnly !== false) {
readOnly = event.target.readOnly;
}
if (typeof event.target.disabled !== "undefined" && event.target.disabled !== false) {
disabled = event.target.disabled;
}
// [Alt]+←を無効
if(event.altKey && (event.key === "ArrowLeft" || event.key === "Left")) {
return false;
}
// BackSpaceを無効
if (event.key === "Backspace") {
if ((tagName === "input" && (type === "text" || type === "password")) || tagName === "textarea") {
// テキストボックス・パスワード・テキストエリアの場合
if (readOnly || disabled) {
// 入力不可の場合は無効
return false;
}
}
}
return true;
});
解説
keydownイベントでは、falseを返すとキー入力が無効になります。
なので、イベントの発生元を判別して、[Alt]+←は問答無用でfalse、[Backspace]はイベント発生元の要素を判別して入力可能な要素であればtrue、入力不可能な要素であればfalseを返してやるようにすればいいです。
入力可能な要素はinput type="text",input type="password",textareaの3つで、readOnlyとdisabledがどちらもfalseである場合のみです。
event.target
イベント発生元の要素を取得します。
要素の属性値取得時は属性自体が存在しない場合もあるので、undefinedチェックをしてから取得しています。tagNameまではやらんでもいいかも。
event.key
event.keyCodeが非推奨になってしまったので、こちらを利用。
注意点としては、一部のキーがブラウザによって違う値を返してくること。
なので、判定の際に返ってくる可能性のある値を全て判定しなければいけません。
(Chrome: Escape IE: Esc など)
この例ではChrome、Internet Explorer、FireFoxに対応しています。