我不希望我的网站用户使用退格键转到上一页,
但是我仍然想继续使用退格,
就像删除错误的打字一样
我该怎么办?
非常感谢。
答案 0 :(得分:11)
正如其他人所提到的,有些方法可以监控退格键事件并执行不同的操作。
我建议不要捕获退格键,原因有两个:
1)这只是令人恼火和烦躁的用户可能无法返回您的页面。
2)Backspace不是返回上一页的唯一方法。还有其他一些组合可以完成同样的事情,以及明显的“后退按钮”。
不要这样做 - 但如果必须,请使用onbeforeunload()而不是捕获浏览器特定的击键。
答案 1 :(得分:11)
解决方案:将以下代码放在包含表单的所有网页的末尾:
<!-- Block the Backspace and Enter keys in forms, outside of input texts and textareas -->
<script type="text/javascript">
function blockBackspaceAndEnter(e) {
if (!e) { // IE reports window.event instead of the argument
e = window.event;
}
var keycode;
if (document.all) {
// IE
keycode = e.keyCode;
} else {
// Not IE
keycode = e.which;
}
// Enter is only allowed in textareas, and Backspace is only allowed in textarea and input text and password
if ((keycode == 8
&& e.srcElement.type != "text"
&& e.srcElement.type != "textarea"
&& e.srcElement.type != "password")
|| (keycode == 13 && e.srcElement.type != "textarea")) {
e.keyCode = 0;
if (document.all) {
// IE
event.returnValue = false;
} else {
// Non IE
Event.stop(e);
}
}
}
for (var i = 0; i < document.forms.length; i++) {
document.forms[i].onkeydown = blockBackspaceAndEnter;
}
</script>
我对其他人之前的回答有以下评论:
有人说:
“请不要。用户喜欢 退格到去背;回去是 最重要的浏览器功能之一 打破它是无法忍受的粗鲁。“
我对他的回答是:
是的,通常人们会使用后退按钮返回,但不能使用带有FORMS的页面。另一方面,人们很容易在附近或外面意外点击输入文本或textarea ,然后按后退按钮,这样他们就会丢失所有编辑内容,正如其他人也注意到的那样:
“用户不在文本框中并点击了 退格,完全失去了所有 他们刚刚输入的表格信息。 通常不会是一个问题,但是 对我们来说,我们正在填写大量文字 在长状态下。“
对于输入密钥以提交表单,也可以说同样的不受欢迎的行为,这对于包含少量字段的小表单通常是可取的(如果有的话) ,但不适用于包含许多字段和选择框以及输入框和textareas的表单,其中大部分时间您不希望在按Enter键时提交表单。
所以这就是为什么我建议上面的代码,它适用于所有&lt; FORM&gt;标记webster建议的函数,但没有检查ALT,我认为这没有用,并且没有检查CTRL + N和CTRL + R和CTRL + F5,我们不想阻止它,因为当它们被使用时,它们并非偶然。
不幸的是,当你的FORM中有DIV和TABLE 时,上面的代码在Firefox中不起作用!这是因为keydown事件似乎没有传播到包含表单,而是默认(UNDESIRED!)行为应用于Backspace和Enter键。 我还没找到这个解决方案...
答案 2 :(得分:6)
您可以使用body标签上的“onbeforeunload”属性来提示用户他将离开该页面。
答案 3 :(得分:1)
当光标位于texarea,文本和密码控件中时,您只需使用以下代码段来阻止退格。
function onKeyDown()
{
if((event.altKey) || ((event.keyCode == 8) &&
(event.srcElement.type != "text" &&
event.srcElement.type != "textarea" &&
event.srcElement.type != "password")) ||
((event.ctrlKey) && ((event.keyCode == 78) || (event.keyCode == 82)) ) || (event.keyCode == 116) ) {
event.keyCode = 0;
event.returnValue = false;}
}
从body标签onkeydown事件
调用此函数答案 4 :(得分:1)
Filme Noi Cinema有正确的答案,但示例代码有点陈旧。我只需要这个解决方案,所以我想我会发布我用过的代码。
//I use the standard DOM method for accessing the body tag, because the
//non-standard HTML DOM shortcuts are not stable. The correct behavior is
//dynamically attached to the entire body using the onkeypress event, which
//is the most stable event to target cross browser.
document.getElementsByTagName("body")[0].onkeypress = function (event) {
var a = event || window.event, //get event cross browser
b = a.target || a.srcElement; //get source cross browser
//the only thing that matters is the backspace key
if (a.keyCode === 8) {
//if you are a textarea or input type text or password then fail
if (b.nodeName === "textarea" || (b.nodeName === "input" && (b.getAttribute("type") === "text" || b.getAttribute("type") === "password"))) {
return true;
} else {
//backspace is disabled for everything else
return false;
}
}
};
此代码需要在用户开始使用页面之前执行。有很多方法可以做到这一点:
示例:
//self executing function
(function () {
the solution code here
}());
//wrapper to onload event
document.getElementsByTagName("body")[0].onload = function () {
the solution code here
};
如果您想查看实际操作示例,我会将此代码添加到Pretty Diff。
答案 5 :(得分:0)
您应该能够将onKeydown / Up / Press监听器附加到您的窗口。在此函数中,查看已按下的键代码以及事件目标。如果键码是退格键,并且目标不是输入框或文本区域,请阻止该事件。
答案 6 :(得分:0)
我终于找到了适用于所有浏览器的产品。
由Hazem Saleh执导 他的网站地址是: http://www.technicaladvices.com/2012/07/16/preventing-backspace-from-navigating-back-in-all-the-browsers/
/*Starts here:*/
document.onkeydown = function (event) {
if (!event) { /* This will happen in IE */
event = window.event;
}
var keyCode = event.keyCode;
if (keyCode == 8 &&
((event.target || event.srcElement).tagName != "TEXTAREA") &&
((event.target || event.srcElement).tagName != "INPUT")) {
if (navigator.userAgent.toLowerCase().indexOf("msie") == -1) {
event.stopPropagation();
} else {
alert("prevented");
event.returnValue = false;
}
return false;
}
};
/*Ends Here*/