[解決済み】バックスペースキーで戻ることができないようにするには?
2022-04-19 21:30:45
質問
IEでは、(ひどく非標準的だが、動作する)jQueryでこれを行うことができます。
if ($.browser.msie)
$(document).keydown(function(e) { if (e.keyCode == 8) window.event.keyCode = 0;});
しかし、Firefoxで動く方法で、あるいはおまけにクロスブラウザでできるのだろうか。
念のため。
$(document).keydown(function(e) { if (e.keyCode == 8) e.stopPropagation(); });
は何もしません。
$(document).keydown(function(e) { if (e.keyCode == 8) e.preventDefault(); });
は問題を解決しますが、バックスペースキーがページ上で使用できなくなり、元の動作よりさらに悪化します。
EDIT なぜこのようなことをするかというと、私は単純なウェブページではなく、大規模なアプリケーションを作成しているからです。バックスペースを押す場所を間違えただけで、10分の作業が失われるのは信じられないほど迷惑な話です。バックスペースキーで戻ることができないようにすることで、ミスを防ぐこととユーザーに迷惑をかけることの比率は1000/1をはるかに超えるはずです。
EDIT2: 私は ではなく 履歴のナビゲーションを防ごうとしているのであって、単なる事故です。
EDIT3です。brentonstrinesのコメント(質問が人気なのでこちらに移動しました)。これは長期的な'修正'ですが、'修正'の代わりに webkitでこの動作を変更するChromiumのバグ
解決方法は?
このコードは、少なくともIEとFirefoxで問題を解決します(他のブラウザではテストしていませんが、問題が他のブラウザにも存在するのであれば、動作する合理的な可能性を与えます)。
// Prevent the backspace key from navigating back.
$(document).unbind('keydown').bind('keydown', function (event) {
if (event.keyCode === 8) {
var doPrevent = true;
var types = ["text", "password", "file", "search", "email", "number", "date", "color", "datetime", "datetime-local", "month", "range", "search", "tel", "time", "url", "week"];
var d = $(event.srcElement || event.target);
var disabled = d.prop("readonly") || d.prop("disabled");
if (!disabled) {
if (d[0].isContentEditable) {
doPrevent = false;
} else if (d.is("input")) {
var type = d.attr("type");
if (type) {
type = type.toLowerCase();
}
if (types.indexOf(type) > -1) {
doPrevent = false;
}
} else if (d.is("textarea")) {
doPrevent = false;
}
}
if (doPrevent) {
event.preventDefault();
return false;
}
}
});
関連
-
[解決済み】Facebook Graph API のクエリで with=location を使用すると "Uncaught (in promise) undefined" というエラーが発生する。
-
[解決済み】SyntaxError: 'import' と 'export' は 'sourceType: module' とだけ表示されるかもしれない - Gulp
-
[解決済み】npm install --legacy-peer-deps は具体的に何をするのですか?どんなときに推奨されるのか/どんな使用例が考えられるのか?
-
[解決済み】PhantomJS 2.1.1を使用してReactJSアプリケーションをレンダリングできない理由とは?
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] JavaScriptで空文字列/未定義文字列/null文字列をチェックするにはどうすればよいですか?
-
[解決済み] JavaScriptで文字列をbooleanに変換するにはどうしたらいいですか?
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] セレクタの子を取得する方法は?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Facebook Graph API のクエリで with=location を使用すると "Uncaught (in promise) undefined" というエラーが発生する。
-
[解決済み】パッシブイベントリスナー内部でpreventDefaultができない
-
[解決済み】JavaScriptのinnerHTMLで要素が更新されない
-
[解決済み】Redux TypeError: 未定義のプロパティ 'apply' を読み取れない
-
[解決済み】React-Routerの子が1つしかない。
-
[解決済み】JavaScriptで相対URLへのリダイレクトを行う
-
[解決済み】このオブジェクトの "forEach "はなぜ関数でないのですか?
-
[解決済み】未定義のプロパティ 'forEach' を読み取ることができない
-
[解決済み】ブラウザの戻るボタンのイベントを検出する方法 - クロスブラウザ編
-
[解決済み】JavaScriptを使って、ブラウザの戻るボタンを止めるにはどうしたらいいですか?