阻止BACKSPACE使用jQuery导航(如Google的主页)

Question

请注意,在Google的主页上,不关注任何元素,按BACKSPACE会将焦点放入搜索工具栏而不是向后导航.

我怎么能做到这一点？

我的应用程序中的用户一直遇到此问题.他们没有专注于任何元素,并点击BACKSPACE将其抛出应用程序.

Answer 1

我会绑定一个事件处理程序,keydown并阻止该事件的默认操作,如果我们正在处理a textarea或以外的退格键input:

$(document).on("keydown", function (e) {
    if (e.which === 8 && !$(e.target).is("input, textarea")) {
        e.preventDefault();
    }
});

Answer 2

我真的很喜欢Andrew Whitaker的回答.但是,当专注于只读,无线电或复选框输入字段时,它仍然会导航回来,并且不允许在contentEditable元素上退格,所以我添加了一些修改.归功于Andrew Whitaker.

$(document).on("keydown", function (e) {
    if (e.which === 8 && !$(e.target).is("input:not([readonly]):not([type=radio]):not([type=checkbox]), textarea, [contentEditable], [contentEditable=true]")) {
        e.preventDefault();
    }
});

目前,似乎有必要在[contentEditable]!= [contentEditable = true]中包含HTML中的每个变体[contentEditable].

Answer 3

谷歌这样做的方式有点酷.当您按退格键时,它们会聚焦文本字段,从而阻止用户返回!

你可以尝试相同:

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<input id="target" type="text" />

<script type="text/javascript">
$(document).keydown(function(e) { if (e.keyCode == 8) $('#target').focus(); });
</script>

演示:http://jsfiddle.net/epinapala/TxG5p/