slorber / backspace-disabler

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

Hi 👋, I'm Sébastien, a freelance developer living near Paris, specialized in React and React-Native.

I’m currently working on Docusaurus, a React-based static site generator with a focus on documentation, as a contractor for Facebook.

Website - LinkedIn - StackOverflow - Dev.to

---

I am the author of ThisWeekInReact.com, the best newsletter to stay up-to-date with the React ecosystem. Join more than 15000 readers today! 🔥

---

I like:

• remote work: since 2014
• flexibility and trust: I work for people that care about outcomes
• interesting projects: I choose carefully, to keep learning
• part-time: working on multiple projects gives a diverse experience
• consulting, coaching, training, audits: the best ROI for my customers, and a higher rate for me

I chose a different path than most French contractors (on-site, full-time, multi-years contracts).

Previously, I was a Java/Scala developer for a few years, and I didn't like JavaScript much :)

---

backspace-disabler's Issues

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

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