I have code for 3 different task which I want to execute by clicking and pressing a key, so there will be 3 different combination of clicking and pressing. For example-
window.addEventListener("keydown", function(e){
if(e.keyCode === 16) {console.log('Yap! Shift works...');}
if(e.keyCode === 17) {console.log('Yap! Ctrl works...');
document.addEventListener('click',function (event) {
console.log(event.target.className);
}, false);
}
},false);
Now, when I press click shift key, I get related output, when I click Ctrl key and then click, I get the class name of the object I click on.
But the problem is, the output keeps coming as much I hold the key!! I want to execute the part of my code for once, and exactly when the key is pressed and a clicked is occurred.
How can I do that?
In general, how can I execute 3 part of code for three different tasks by clicking and pressing efficiently?
Adding an event handler while handing an event, is often the wrong way to solve a problem. Imagine how you will accumulate adding handlers... in your case there will eventually be many bindings to the same click handler.
It is better to bind the handlers you need immediately, and then work with keeping state on what exactly needs to happen while handling the event.
In these key handlers (keydown, keyup), keep track of whether the Shift/Control keys are depressed or not.
Also, use e.key as e.keyCode is deprecated.
Here is how that could work:
let keys = {
"Shift": false,
"Control": false
};
function keyToggle(e) {
if (!(e.key in keys)) return; // not ctrl or shift
let isKeyDown = e.type === "keydown";
if (isKeyDown === keys[e.key]) return; // key position did not change
keys[e.key] = isKeyDown;
console.log(e.key + (isKeyDown ? " pressed" : " released"));
}
document.addEventListener("keydown", keyToggle, false);
document.addEventListener("keyup", keyToggle, false);
document.addEventListener('click', function (e) {
if (keys["Control"]) console.log(event.target.className);
}, false);
<main class="main">Main</main>
<aside class="aside">Aside</aside>
As you addEventListener you can also removeEventListener.
For that you need a reference to your event handler, so you cannot use anonymous functions, but named functions or functions stored in a variable.
Edit
Here is an example of using CTRL+click:
// CTRL + CLICK implementation
let hasCtrl = false;
// Store the handler in a constant or variable
const handleClick = function(event) {
console.log(event.target.className);
}
// Use named function
function handleKeyDown(e) {
if (e.keyCode === 16) {
console.log('Yap! Shift works...');
}
}
const setCtrlInactive = (e) => {
if (!hasCtrl && e.keyCode === 17) {
console.log('Nope! Ctrl does not work...');
document.removeEventListener('click', handleClick);
hasCtrl = true;
}
}
const setCtrlActive = (e) => {
if (hasCtrl && e.keyCode === 17) {
console.log('Yap! Ctrl works...');
document.addEventListener('click', handleClick);
hasCtrl = false;
}
}
document.addEventListener("keyup", setCtrlInactive);
document.addEventListener("keydown", setCtrlActive);
document.addEventListener("keydown", handleKeyDown);
<main class="main">Main</main>
<aside class="aside">Aside</aside>
Well you can easily create an variable to lock it:
var locked = false;
window.addEventListener("keydown", function(e){
if(e.keyCode === 16 && !locked) {console.log('Yap! Shift works...'); locked =
true;}
if(e.keyCode === 17 && !locked ) {console.log('Yap! Ctrl works...');
locked = true;
}
},false);
document.addEventListener('click',function (event) {
if(locked){
// do something
console.log(event.target.className);
}
}, false);
window.addEventListener("keyup", function(){
locked = false;
}
That's because you called addEventListener('click') in the keydown event handler.
let ctrl = false;
window.addEventListener("keydown", function(e) {
if (e.keyCode === 16) {
console.log('Yap! Shift works...');
}
if (e.keyCode === 17 && ctrl === false) {
console.log('Yap! Ctrl works...');
ctrl = true;
}
});
window.addEventListener("keyup", function(e) {
if (e.keyCode === 17) {
ctrl = false;
}
});
document.addEventListener('click', function(event) {
if (ctrl) {
console.log(event.target.className);
}
}, false);
Instead, you should use keyup event and flag variable.
On IE I can do this with the (terribly non-standard, but working) jQuery
if ($.browser.msie)
$(document).keydown(function(e) { if (e.keyCode == 8) window.event.keyCode = 0;});
But is it possible to do in a way which works on Firefox, or in a cross-browser way for a bonus?
For the record:
$(document).keydown(function(e) { if (e.keyCode == 8) e.stopPropagation(); });
does nothing.
$(document).keydown(function(e) { if (e.keyCode == 8) e.preventDefault(); });
solves the problem, but renders the backspace key unusable on the page, which is even worse than the original behaviour.
EDIT:
The reason I do this is that I'm not creating a simple web page but a large application. It is incredibly annoying to lose 10 minutes of work just because you pressed backspace in the wrong place. The ratio of preventing mistakes vs. annoying users should be way above 1000/1 by preventing the backspace key from navigating back.
EDIT2: I'm not trying to prevent history navigation, just accidents.
EDIT3: #brentonstrines comment (moved here since the question is so popular): This is a long-term 'fix', but you could throw your support behind the Chromium bug to change this behavior in webkit
This code solves the problem, at least in IE and Firefox (haven't tested any other, but I give it a reasonable chance of working if the problem even exists in other browsers).
// 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;
}
}
});
This code works on all browsers and swallows the backspace key when not on a form element, or if the form element is disabled|readOnly. It is also efficient, which is important when it is executing on every key typed in.
$(function(){
/*
* this swallows backspace keys on any non-input element.
* stops backspace -> back
*/
var rx = /INPUT|SELECT|TEXTAREA/i;
$(document).bind("keydown keypress", function(e){
if( e.which == 8 ){ // 8 == backspace
if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){
e.preventDefault();
}
}
});
});
The other answers here have established that this cannot be done without whitelisting elements in which Backspace is allowed. This solution is not ideal because the whitelist is not as straightforward as merely textareas and text/password inputs, but is repeatedly found to be incomplete and needing to be updated.
However, since the purpose of suppressing the backspace functionality is merely to prevent users from accidentally losing data, the beforeunload solution is a good one because the modal popup is surprising--modal popups are bad when they are triggered as part of a standard workflow, because the user gets used to dismissing them without reading them, and they are annoying. In this case, the modal popup would only appear as an alternative to a rare and surprising action, and is therefore acceptable.
The problem is that an onbeforeunload modal must not pop up whenever the user navigates away from the page (such as when clicking a link or submitting a form), and we don't want to start whitelisting or blacklisting specific onbeforeunload conditions.
The ideal combination of tradeoffs for a generalized solution is as follows: keep track of whether backspace is pressed, and only pop up the onbeforeunload modal if it is. In other words:
function confirmBackspaceNavigations () {
// http://stackoverflow.com/a/22949859/2407309
var backspaceIsPressed = false
$(document).keydown(function(event){
if (event.which == 8) {
backspaceIsPressed = true
}
})
$(document).keyup(function(event){
if (event.which == 8) {
backspaceIsPressed = false
}
})
$(window).on('beforeunload', function(){
if (backspaceIsPressed) {
backspaceIsPressed = false
return "Are you sure you want to leave this page?"
}
})
} // confirmBackspaceNavigations
This has been tested to work in IE7+, FireFox, Chrome, Safari, and Opera. Just drop this function into your global.js and call it from any page where you don't want users to accidentally lose their data.
Note that an onbeforeunload modal can only be triggered once, so if the user presses backspace again, the modal will not fire again.
Note that this will not trigger on hashchange events, however in that context you can use other techniques to keep users from accidentally losing their data.
A more elegant/concise solution:
$(document).on('keydown',function(e){
var $target = $(e.target||e.srcElement);
if(e.keyCode == 8 && !$target.is('input,[contenteditable="true"],textarea'))
{
e.preventDefault();
}
})
Modification of erikkallen's Answer to address different input types
I've found that an enterprising user might press backspace on a checkbox or a radio button in a vain attempt to clear it and instead they would navigate backwards and lose all of their data.
This change should address that issue.
New Edit to address content editable divs
//Prevents backspace except in the case of textareas and text inputs to prevent user navigation.
$(document).keydown(function (e) {
var preventKeyPress;
if (e.keyCode == 8) {
var d = e.srcElement || e.target;
switch (d.tagName.toUpperCase()) {
case 'TEXTAREA':
preventKeyPress = d.readOnly || d.disabled;
break;
case 'INPUT':
preventKeyPress = d.readOnly || d.disabled ||
(d.attributes["type"] && $.inArray(d.attributes["type"].value.toLowerCase(), ["radio", "checkbox", "submit", "button"]) >= 0);
break;
case 'DIV':
preventKeyPress = d.readOnly || d.disabled || !(d.attributes["contentEditable"] && d.attributes["contentEditable"].value == "true");
break;
default:
preventKeyPress = true;
break;
}
}
else
preventKeyPress = false;
if (preventKeyPress)
e.preventDefault();
});
Example
To test make 2 files.
starthere.htm - open this first so you have a place to go back to
Navigate to here to test
test.htm - This will navigate backwards when backspace is pressed while the checkbox or submit has focus (achieved by tabbing). Replace with my code to fix.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).keydown(function(e) {
var doPrevent;
if (e.keyCode == 8) {
var d = e.srcElement || e.target;
if (d.tagName.toUpperCase() == 'INPUT' || d.tagName.toUpperCase() == 'TEXTAREA') {
doPrevent = d.readOnly || d.disabled;
}
else
doPrevent = true;
}
else
doPrevent = false;
if (doPrevent)
e.preventDefault();
});
</script>
</head>
<body>
<input type="text" />
<input type="radio" />
<input type="checkbox" />
<input type="submit" />
</body>
</html>
Based on the comments it appears you want to stop people losing information in forms, if they press backspace to delete but the field is not focused.
In which case, you want to look at the onunload event handler. Stack Overflow uses it - if you try to leave a page when you've started writing an answer, it pops up a warning.
Most of the answers are in jquery. You can do this perfectly in pure Javascript, simple and no library required. This article was a good starting point for me but since keyIdentifier is deprecated, I wanted this code to be more secure so I added ||e.keyCode==8 to the if statement. Also, the code wasn't working well on Firefox so I added return false; and now it works perfectly well. Here it is:
<script type="text/javascript">
window.addEventListener('keydown',function(e){if(e.keyIdentifier=='U+0008'||e.keyIdentifier=='Backspace'||e.keyCode==8){if(e.target==document.body){e.preventDefault();return false;}}},true);
</script>
This code works great because,
It is in pure javascript (no library required).
Not only it checks the key pressed, it confirms if the action is really a browser "back" action.
Together with the above, user can type and delete text from input text boxes on the web page without any problems while still preventing the back button action.
It is short, clean, fast and straight to the point.
You can add console.log(e); for your your test purposes, and hit F12 in chrome, go to "console" tab and hit "backspace" on the page and look inside it to see what values are returned, then you can target all of those parameters to further enhance the code above to suit your needs.
Stop from navigating this code works!
$(document).on("keydown", function (event) {
if (event.keyCode === 8) {
event.preventDefault();
}
});
But for not to restricting text fields but others
$(document).on("keydown", function (event) {
if (event.which === 8 && !$(event.target).is("input, textarea")) {
event.preventDefault();
}
});
To prevent it for specific field simply use
$('#myOtherField').on("keydown", function (event) {
if (event.keyCode === 8 || event.which === 8) {
event.preventDefault();
}
});
Referring to this one below!
Prevent BACKSPACE from navigating back with jQuery (Like Google's Homepage)
Combining solutions given by "thetoolman" && "Biff MaGriff"
following code seems to work correctly in IE 8/Mozilla/Chrome
$(function () {
var rx = /INPUT|TEXTAREA/i;
var rxT = /RADIO|CHECKBOX|SUBMIT/i;
$(document).bind("keydown keypress", function (e) {
var preventKeyPress;
if (e.keyCode == 8) {
var d = e.srcElement || e.target;
if (rx.test(e.target.tagName)) {
var preventPressBasedOnType = false;
if (d.attributes["type"]) {
preventPressBasedOnType = rxT.test(d.attributes["type"].value);
}
preventKeyPress = d.readOnly || d.disabled || preventPressBasedOnType;
} else {preventKeyPress = true;}
} else { preventKeyPress = false; }
if (preventKeyPress) e.preventDefault();
});
});
Not sure why no-one's just answered this - seems like a perfectly reasonable technical question to ask whether it's possible.
No, I don't think there's a cross-browser way to disable the backspace button. I know it's not enabled by default in FF these days though.
I had a hard time finding a non-JQUERY answer. Thanks to Stas for putting me on the track.
Chrome: If you don't need cross browser support, you can just use a blacklist, rather than whitelisting. This pure JS version works in Chrome, but not in IE. Not sure about FF.
In Chrome (ver. 36, mid 2014), keypresses not on an input or contenteditable element seem to be targeted to <BODY>. This makes it possible use a blacklist, which I prefer to whitelisting. IE uses the last click target - so it might be a div or anything else. That makes this useless in IE.
window.onkeydown = function(event) {
if (event.keyCode == 8) {
//alert(event.target.tagName); //if you want to see how chrome handles keypresses not on an editable element
if (event.target.tagName == 'BODY') {
//alert("Prevented Navigation");
event.preventDefault();
}
}
}
Cross Browser: For pure javascript, I found Stas' answer to be the best. Adding one more condition check for contenteditable made it work for me*:
document.onkeydown = function(e) {stopDefaultBackspaceBehaviour(e);}
document.onkeypress = function(e) {stopDefaultBackspaceBehaviour(e);}
function stopDefaultBackspaceBehaviour(event) {
var event = event || window.event;
if (event.keyCode == 8) {
var elements = "HTML, BODY, TABLE, TBODY, TR, TD, DIV";
var d = event.srcElement || event.target;
var regex = new RegExp(d.tagName.toUpperCase());
if (d.contentEditable != 'true') { //it's not REALLY true, checking the boolean value (!== true) always passes, so we can use != 'true' rather than !== true/
if (regex.test(elements)) {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
}
}
}
}
*Note that IEs [edit: and Spartan/TechPreview] have a "feature" that makes table-related elements uneditable. If you click one of those and THEN press backspace, it WILL navigate back. If you don't have editable <td>s, this is not an issue.
This solution is similar to others that have been posted, but it uses a simple whitelist making it easily customizable to allow the backspace in specified elements just by setting the selector in the .is() function.
I use it in this form to prevent the backspace on pages from navigating back:
$(document).on("keydown", function (e) {
if (e.which === 8 && !$(e.target).is("input:not([readonly]), textarea")) {
e.preventDefault();
}
});
To elaborate slightly on #erikkallen's excellent answer, here is a function that allows all keyboard-based input types, including those introduced in HTML5:
$(document).unbind('keydown').bind('keydown', function (event) {
var doPrevent = false;
var INPUTTYPES = [
"text", "password", "file", "date", "datetime", "datetime-local",
"month", "week", "time", "email", "number", "range", "search", "tel",
"url"];
var TEXTRE = new RegExp("^" + INPUTTYPES.join("|") + "$", "i");
if (event.keyCode === 8) {
var d = event.srcElement || event.target;
if ((d.tagName.toUpperCase() === 'INPUT' && d.type.match(TEXTRE)) ||
d.tagName.toUpperCase() === 'TEXTAREA') {
doPrevent = d.readOnly || d.disabled;
} else {
doPrevent = true;
}
}
if (doPrevent) {
event.preventDefault();
}
});
JavaScript - jQuery way:
$(document).on("keydown", function (e) {
if (e.which === 8 && !$(e.target).is("input, textarea")) {
e.preventDefault();
}
});
Javascript - the native way, that works for me:
<script type="text/javascript">
//on backspace down + optional callback
function onBackspace(e, callback){
var key;
if(typeof e.keyIdentifier !== "undefined"){
key = e.keyIdentifier;
}else if(typeof e.keyCode !== "undefined"){
key = e.keyCode;
}
if (key === 'U+0008' ||
key === 'Backspace' ||
key === 8) {
if(typeof callback === "function"){
callback();
}
return true;
}
return false;
}
//event listener
window.addEventListener('keydown', function (e) {
switch(e.target.tagName.toLowerCase()){
case "input":
case "textarea":
break;
case "body":
onBackspace(e,function(){
e.preventDefault();
});
break;
}
}, true);
</script>
I had some problems with the accepted solution and the Select2.js plugin; I was not able to delete characters in the editable box as the delete action was being prevented. This was my solution:
//Prevent backwards navigation when trying to delete disabled text.
$(document).unbind('keydown').bind('keydown', function (event) {
if (event.keyCode === 8) {
var doPrevent = false,
d = event.srcElement || event.target,
tagName = d.tagName.toUpperCase(),
type = (d.type ? d.type.toUpperCase() : ""),
isEditable = d.contentEditable,
isReadOnly = d.readOnly,
isDisabled = d.disabled;
if (( tagName === 'INPUT' && (type === 'TEXT' || type === 'PASSWORD'))
|| tagName === 'PASSWORD'
|| tagName === 'TEXTAREA') {
doPrevent = isReadOnly || isDisabled;
}
else if(tagName === 'SPAN'){
doPrevent = !isEditable;
}
else {
doPrevent = true;
}
}
if (doPrevent) {
event.preventDefault();
}
});
Select2 creates a Span with an attribute of "contentEditable" which is set to true for the editable combo box in it. I added code to account for the spans tagName and the different attribute. This solved all my problems.
Edit: If you are not using the Select2 combobox plugin for jquery, then this solution may not be needed by you, and the accepted solution might be better.
document.onkeydown = function (e) {
e.stopPropagation();
if ((e.keyCode==8 || e.keyCode==13) &&
(e.target.tagName != "TEXTAREA") &&
(e.target.tagName != "INPUT")) {
return false;
}
};
This code solves the problem in all browsers:
onKeydown:function(e)
{
if (e.keyCode == 8)
{
var d = e.srcElement || e.target;
if (!((d.tagName.toUpperCase() == 'BODY') || (d.tagName.toUpperCase() == 'HTML')))
{
doPrevent = false;
}
else
{
doPrevent = true;
}
}
else
{
doPrevent = false;
}
if (doPrevent)
{
e.preventDefault();
}
}
Simplest way to prevent navigation on pressing backspace
$(document).keydown(function () {
if (event.keyCode == 8) {
if (event.target.nodeName == 'BODY') {
event.preventDefault();
}
}
});
Using Dojo toolkit 1.7, this works in IE 8:
require(["dojo/on", "dojo/keys", "dojo/domReady!"],
function(on, keys) {
on(document.body,"keydown",function(evt){if(evt.keyCode == keys.BACKSPACE)evt.preventDefault()});
});
Have you tried the very simple solution of just adding the following attribute to your read only text field:
onkeydown="return false;"
This will keep the browser from going back in history when the Backspace key is pressed in a read only text field. Maybe I am missing your true intent, but seems like this would be the simplest solution to your issue.
A much neater solution -
$(document).on('keydown', function (e) {
var key = e == null ? event.keyCode : e.keyCode;
if(key == 8 && $(document.activeElement.is(':not(:input)'))) //select, textarea
e.preventDefault();
});
Alternately, you could only check if
$(document.activeElement).is('body')
Pure javascript version, which works in all browsers:
document.onkeydown = function(e) {stopDefaultBackspaceBehaviour(e);}
document.onkeypress = function(e) {stopDefaultBackspaceBehaviour(e);}
function stopDefaultBackspaceBehaviour(event) {
var event = event || window.event;
if (event.keyCode == 8) {
var elements = "HTML, BODY, TABLE, TBODY, TR, TD, DIV";
var d = event.srcElement || event.target;
var regex = new RegExp(d.tagName.toUpperCase());
if (regex.test(elements)) {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
}
}
}
Of course you can use "INPUT, TEXTAREA" and use "if (!regex.test(elements))" then. The first worked fine for me.
Performance?
I was worried about performance and made a fiddle: http://jsfiddle.net/felvhage/k2rT6/9/embedded/result/
var stresstest = function(e, method, index){...
I have analyzed the most promising methods i found in this thread. It turns out, they were all very fast and most probably do not cause a problem in terms of "sluggishness" when typing.
The slowest Method i looked at was about 125 ms for 10.000 Calls in IE8. Which is 0.0125ms per Stroke.
I found the methods posted by Codenepal and Robin Maben to be fastest ~ 0.001ms (IE8) but beware of the different semantics.
Perhaps this is a relief to someone introducing this kind of functionality to his code.
Modified erikkallen answer:
$(document).unbind('keydown').bind('keydown', function (event) {
var doPrevent = false, elem;
if (event.keyCode === 8) {
elem = event.srcElement || event.target;
if( $(elem).is(':input') ) {
doPrevent = elem.readOnly || elem.disabled;
} else {
doPrevent = true;
}
}
if (doPrevent) {
event.preventDefault();
return false;
}
});
This solution worked very well when tested.
I did add some code to handle some input fields not tagged with input, and to integrate in an Oracle PL/SQL application that generates an input form for my job.
My "two cents":
if (typeof window.event != ''undefined'')
document.onkeydown = function() {
//////////// IE //////////////
var src = event.srcElement;
var tag = src.tagName.toUpperCase();
if (event.srcElement.tagName.toUpperCase() != "INPUT"
&& event.srcElement.tagName.toUpperCase() != "TEXTAREA"
|| src.readOnly || src.disabled
)
return (event.keyCode != 8);
if(src.type) {
var type = ("" + src.type).toUpperCase();
return type != "CHECKBOX" && type != "RADIO" && type != "BUTTON";
}
}
else
document.onkeypress = function(e) {
//////////// FireFox
var src = e.target;
var tag = src.tagName.toUpperCase();
if ( src.nodeName.toUpperCase() != "INPUT" && tag != "TEXTAREA"
|| src.readOnly || src.disabled )
return (e.keyCode != 8);
if(src.type) {
var type = ("" + src.type).toUpperCase();
return type != "CHECKBOX" && type != "RADIO" && type != "BUTTON";
}
}
I created a NPM project with a clean version of the currently accepted (of erikkallen)
https://github.com/slorber/backspace-disabler
It uses basically the same principles but:
No dependency
Support for contenteditable
More readable / maintainable code base
Will be supported as it will be used in production by my company
MIT license
var Backspace = 8;
// See http://stackoverflow.com/questions/12949590/how-to-detach-event-in-ie-6-7-8-9-using-javascript
function addHandler(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}
function removeHandler(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
// Test wether or not the given node is an active contenteditable,
// or is inside an active contenteditable
function isInActiveContentEditable(node) {
while (node) {
if ( node.getAttribute && node.getAttribute("contenteditable") === "true" ) {
return true;
}
node = node.parentNode;
}
return false;
}
var ValidInputTypes = ['TEXT','PASSWORD','FILE','EMAIL','SEARCH','DATE'];
function isActiveFormItem(node) {
var tagName = node.tagName.toUpperCase();
var isInput = ( tagName === "INPUT" && ValidInputTypes.indexOf(node.type.toUpperCase()) >= 0 );
var isTextarea = ( tagName === "TEXTAREA" );
if ( isInput || isTextarea ) {
var isDisabled = node.readOnly || node.disabled;
return !isDisabled;
}
else if ( isInActiveContentEditable(node) ) {
return true;
}
else {
return false;
}
}
// See http://stackoverflow.com/questions/1495219/how-can-i-prevent-the-backspace-key-from-navigating-back
function disabler(event) {
if (event.keyCode === Backspace) {
var node = event.srcElement || event.target;
// We don't want to disable the ability to delete content in form inputs and contenteditables
if ( isActiveFormItem(node) ) {
// Do nothing
}
// But in any other cases we prevent the default behavior that triggers a browser backward navigation
else {
event.preventDefault();
}
}
}
/**
* By default the browser issues a back nav when the focus is not on a form input / textarea
* But users often press back without focus, and they loose all their form data :(
*
* Use this if you want the backspace to never trigger a browser back
*/
exports.disable = function(el) {
addHandler(el || document,"keydown",disabler);
};
/**
* Reenable the browser backs
*/
exports.enable = function(el) {
removeHandler(el || document,"keydown",disabler);
};
Here is my rewrite of the top-voted answer. I tried to check element.value!==undefined (since some elements like may have no html attribute but may have a javascript value property somewhere on the prototype chain), however that didn't work very well and had lots of edge cases. There doesn't seem to be a good way to future-proof this, so a whitelist seems the best option.
This registers the element at the end of the event bubble phase, so if you want to handle Backspace in any custom way, you can do so in other handlers.
This also checks instanceof HTMLTextAreElement since one could theoretically have a web component which inherits from that.
This does not check contentEditable (combine with other answers).
https://jsfiddle.net/af2cfjc5/15/
var _INPUTTYPE_WHITELIST = ['text', 'password', 'search', 'email', 'number', 'date'];
function backspaceWouldBeOkay(elem) {
// returns true if backspace is captured by the element
var isFrozen = elem.readOnly || elem.disabled;
if (isFrozen) // a frozen field has no default which would shadow the shitty one
return false;
else {
var tagName = elem.tagName.toLowerCase();
if (elem instanceof HTMLTextAreaElement) // allow textareas
return true;
if (tagName=='input') { // allow only whitelisted input types
var inputType = elem.type.toLowerCase();
if (_INPUTTYPE_WHITELIST.includes(inputType))
return true;
}
return false; // everything else is bad
}
}
document.body.addEventListener('keydown', ev => {
if (ev.keyCode==8 && !backspaceWouldBeOkay(ev.target)) {
//console.log('preventing backspace navigation');
ev.preventDefault();
}
}, true); // end of event bubble phase
Sitepoint: Disable back for Javascript
event.stopPropagation() and event.preventDefault() do nothing in IE. I had to send return event.keyCode == 11 (I just picked something) instead of just saying "if not = 8, run the event" to make it work, though. event.returnValue = false also works.
Another method using jquery
<script type="text/javascript">
//set this variable according to the need within the page
var BACKSPACE_NAV_DISABLED = true;
function fnPreventBackspace(event){if (BACKSPACE_NAV_DISABLED && event.keyCode == 8) {return false;}}
function fnPreventBackspacePropagation(event){if(BACKSPACE_NAV_DISABLED && event.keyCode == 8){event.stopPropagation();}return true;}
$(document).ready(function(){
if(BACKSPACE_NAV_DISABLED){
//for IE use keydown, for Mozilla keypress
//as described in scr: http://www.codeproject.com/KB/scripting/PreventDropdownBackSpace.aspx
$(document).keypress(fnPreventBackspace);
$(document).keydown(fnPreventBackspace);
//Allow Backspace is the following controls
var jCtrl = null;
jCtrl = $('input[type="text"]');
jCtrl.keypress(fnPreventBackspacePropagation);
jCtrl.keydown(fnPreventBackspacePropagation);
jCtrl = $('input[type="password"]');
jCtrl.keypress(fnPreventBackspacePropagation);
jCtrl.keydown(fnPreventBackspacePropagation);
jCtrl = $('textarea');
jCtrl.keypress(fnPreventBackspacePropagation);
jCtrl.keydown(fnPreventBackspacePropagation);
//disable backspace for readonly and disabled
jCtrl = $('input[type="text"][readonly="readonly"]')
jCtrl.keypress(fnPreventBackspace);
jCtrl.keydown(fnPreventBackspace);
jCtrl = $('input[type="text"][disabled="disabled"]')
jCtrl.keypress(fnPreventBackspace);
jCtrl.keydown(fnPreventBackspace);
}
});
</script>
I've been using this in my code for some time now. I write online tests for students and ran into the problem when students were pressing backspace during their test and it would take them back to the login screen. Frustrating! It works on FF for sure.
document.onkeypress = Backspace;
function Backspace(event) {
if (event.keyCode == 8) {
if (document.activeElement.tagName == "INPUT") {
return true;
} else {
return false;
}
}
}