如果输入字段以外的任何内容都专注于使用 jquery,如何禁用退格键
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/2645681/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to disable backspace if anything other than input field is focused on using jquery
提问by sadmicrowave
How do I disable backspace keystroke if anything other than 2 specific input fields are focused on using jquery?
如果除 2 个特定输入字段以外的任何其他内容都专注于使用 jquery,我如何禁用退格键?
here is my current code (NOW INCLUDING 2 TEXTBOXES):
这是我当前的代码(现在包括 2 个文本框):
$(document).keypress(function(e){
var elid = $(document.activeElement).attr('id');
if(e.keyCode === 8 && elid != 'textbox1' || elid != 'textbox2'){
return false;
};
});
this is not working though....any ideas?
虽然这不起作用....有什么想法吗?
回答by Karl Johan
I think this would do the trick:
我认为这可以解决问题:
$(document).keydown(function(e) {
var elid = $(document.activeElement).hasClass('textInput');
if (e.keyCode === 8 && !elid) {
return false;
};
});
assuming that the textboxes has the class 'textInput'.
假设文本框具有“textInput”类。
回答by Hudson-Peralta
This will disable backspace on your site without having to add specific classes to input boxes. To disable backspace except when using input boxes use .is("input:focus")if you want to disable backspace except when using textarea boxes use .is("input:focus, textarea:focus")
这将禁用您网站上的退格键,而无需向输入框添加特定类。要禁用退格,除非使用输入框使用.is("input:focus")如果你想禁用退格,除非使用 textarea 框使用.is("input:focus, textarea:focus")
$(document).keypress(function(e){
var elid = $(document.activeElement).is("input:focus");
if(e.keyCode === 8 && !elid){
return false;
};
});
回答by Jpsy
The solution of Hudson-Peralta + QF_Developer is great, but it has one flaw:
If your focus is on a radio button or checkbox the backspace button will still throw you back out of the page. Here is a modification to avoid this gap:
Hudson-Peralta + QF_Developer 的解决方案很棒,但它有一个缺陷:
如果您的注意力集中在单选按钮或复选框上,退格按钮仍会将您退回页面。这是为了避免这种差距的修改:
$(document).keydown(function(e){
var elid = $(document.activeElement).is('input[type="text"]:focus, textarea:focus');
if(e.keyCode === 8 && !elid){
return false;
};
});
EDIT 20130204:keypress()
replaced by keydown()
!
The code above now works correctly.
编辑 20130204:keypress()
替换为keydown()
!
上面的代码现在可以正常工作。
EDIT 20151208:
As mentioned in the comment of @outofmind there are more input types that could throw you back when backspace is pressed. Please add to the comma separated selector list of the is() method any type of input fields that allow direct character input and that are really used in your HTML code, like input[type="password"]:focus
, input[type="number"]:focus
or input[type="email"]:focus
.
编辑 20151208:
正如@outofmind 的评论中所提到的,当按下退格键时,有更多的输入类型可能会让你退缩。请在 is() 方法的逗号分隔选择器列表中添加任何类型的允许直接字符输入且真正用于 HTML 代码的输入字段,例如input[type="password"]:focus
,input[type="number"]:focus
或input[type="email"]:focus
。
回答by QFDev
I think a slight modification is needed to handle textareas:
我认为需要稍微修改来处理 textareas:
var elid = $(document.activeElement).is("input:focus, textarea:focus");
回答by rybo111
I made a slight change to the accepted answer, which may be of use to someone:
我对接受的答案进行了轻微更改,这可能对某人有用:
$(document).keydown(function(e) {
var elid = $(document.activeElement).is("input, textarea") ;
if (e.keyCode === 8 && !elid) {
if(e.ctrlKey) {
window.history.back()
}
else {
alert("Navigating with Backspace has been disabled. Use CTRL + Backspace if you want to go back to the previous page (and lose any unsaved changes).");
return false;
}
}
});
With this method, the user can still navigate using Backspace by holding CTRL, but also it takes into account textarea
as well as any input
.
使用这种方法,用户仍然可以通过按住 CTRL 键使用 Backspace 进行导航,但它也会考虑到textarea
任何input
.
Of course, the alternative is to use something like thisinstead, which doesn't allow the user to leave the page if they've inputted anything.
当然,另一种选择是使用类似这样的东西,如果用户输入了任何内容,则不允许用户离开页面。
回答by Cobol
Hudson-Peralta's answer worked good for me but I did a small modification since I use many keydown events:
Hudson-Peralta 的回答对我很有用,但我做了一个小的修改,因为我使用了许多 keydown 事件:
$(document).keydown(function(e){
var elid = $(document.activeElement).is("input:focus");
if(e.keyCode === 8 && !elid){
e.preventDefault();
};
});
回答by Wulf
@Nick Craver, disgraceful answer for a couple of reasons. Answer the question or at least patronize thoughtfully.
@Nick Craver,出于几个原因而做出可耻的回答。回答问题或至少周到光顾。
Here is a prototype based solution I ended up using for my forms because users complained that backspace would take them away from the form (which is such an obviously counterintuitive thing to do, one wonders why all browsers use the backspace key as back button).
这是我最终用于表单的基于原型的解决方案,因为用户抱怨退格键会将他们从表单中带走(这显然是违反直觉的事情,有人想知道为什么所有浏览器都使用退格键作为后退按钮)。
// event handlers must be attached after the DOM is completely loaded
Event.observe(window, 'load', function() {
// keypress won't fire for backspace so we observe 'keydown'
Event.observe(window, 'keydown', function(event){
// 8 == backspace
if( event.keyCode == 8) {
// with no field focused, the target will be HTMLBodyElement
if( event.target == document.body) {
// stop this event from propagating further which prevents
// the browser from doing the 'back' action
event.stop();
}
}
});
});
回答by Raju Sarvasiddi
I too have worked hard on the same. Finally, I found the answer and for everybody's convenience I've placed the solution on http://blog.totusinfo.com/jquery-disable-backspace-for-document-history-except-inputs-and-textarea/
我也为此努力过。最后,我找到了答案,为了大家的方便,我将解决方案放在http://blog.totusinfo.com/jquery-disable-backspace-for-document-history-except-inputs-and-textarea/
回答by JK ABC
I modified the answer a little bit more to combine everyone's good answer
1. used selector "input[type=text]:focus, textarea: focus" to maintain default behavior for these elements, and as JPsy said, to prevent default behavior on inputs like checkbox
2. used e.target instead to make the code depends more exclusively on JQuery, since I'm not sure if every browser support document.activeElement well
我稍微修改了答案以结合每个人的好答案
1. 使用选择器“input[type=text]:focus, textarea:focus”来维护这些元素的默认行为,正如 JPsy 所说,防止输入的默认行为像复选框
2. 使用 e.target 代替使代码更依赖于 JQuery,因为我不确定每个浏览器是否都支持 document.activeElement
EDIT
3. Include passwordfield also by adding "input[type=password]:focus",
编辑
3.还通过添加"input[type=password]:focus" 来包含密码字段,
$(document).keydown(function(e){ var code=e.keyCode; var is_to_stop= (!$(e.target).is("input[type=text]:focus, input[type=password]:focus, textarea:focus")) && (code==8); if(is_to_stop){ return false; } });