slorber/backspace-disabler

Disable the annoying browser backward navigation when the user press the backspace key

BACKSPACE DISABLER

Disable the annoying backward navigation that occurs when the user press the backspace key.

Features

• Prevent browser back on backspace (by using preventDefaut())
• Does not break ability of user to delete content on all known input types
• Supports contentEditable (in read/edit mode)
• Allow to apply the behavior globally or on a subtree
• No dependency

Installation

NPM:

npm install backspace-disabler

Or just copy the code inside index.js into your codebase.

Usage

Require it with CommonJS loader (Browserify / Webpack...)

var BackspaceDisabler = require("backspace-disabler");

// Disable the backspace that triggers backward navigation
BackspaceDisabler.disable(); 
// Revert to normal
BackspaceDisabler.enable();

// Can also be applied to a specific element tree:
var myWidget = document.getElementById("myWidget");
BackspaceDisabler.disable(myWidget);
BackspaceDisabler.enable(myWidget);

Credits

The ideas of this lib come from StackOverflow

Hire a freelance expert

Looking for a React/ReactNative freelance expert with more than 5 years production experience? Contact me from my website or with Twitter.

backspace-disabler's Issues

ConnectedToTheDOM Regression

I have a bit of a strange use case that no longer works after #4 went in.

In my application, I have a parent window that spawns secondary windows. The parent window then disables these secondary windows by passing the secondary window references to BackspaceDisabler.disable(secondaryWindow). The issue is that when I hit backspace in a form element (or content-editable) in the secondary window, the event is prevented. This is because the document that is found by traversing node.parentNode in connectedToTheDom (the secondary window's document) is a different reference than the global document (the primary window's document).

One potential fix is to check the nodeType of the node instead of checking the reference against the document global. If node.nodeType === Node.DOCUMENT_NODE, we've found the closest parent document.

If this seems acceptable then I can submit a pull request for it.

cc @fresheneesz

ValidInputTypes is not enough, like type="number"

var ValidInputTypes = ['TEXT','PASSWORD','FILE','EMAIL','SEARCH','DATE'];

..........

npm module?

Would be nice to be able to pull this in with npm