Suppressing backspace, etc as browser controls


I’m building an SPA that’s cross-platform across both desktops and mobile. In the Android version I am accounting for back button presses, and rather than going back a page in the browser history, I’m setting a sensible page to go back to. This is paired with on-screen backwards navigation. I’m currently working on the Electron version, and have noticed that while the Android version goes back a ‘page’ within the SPA, Electron full-on reloads index.html, reloading from scratch.

Is there an Electron way of suppressing the backspace button so it doesn’t do a history.back(), but still allows for text input? Or am I going to have to do some event jiggery-pokery in my app.

Extra points if I can also set the keypress to do something else, but still not break text input.


You can do something like

document.addEventListener('keydown', function(event) {
  if(event.keyCode != 8) return; // return if not backspace

  // handle backspace event

to prevent the default action from executing and inserting your own logic.


Thanks for that, it’s definitely doing the trick, I had a quick go with a jQuery solution that seemed to be failing, so I was under the impression it may have been something fixable in the electron.js, but I wasn’t finding anything useful. This certainly saves me delving into a rabbit hole.


What platform is that happening on? The default app does not exhibit that behavior on OS X.


I’m on OS X. If you mean that history.back() isn’t default behaviour, It’s definitely not something that I’m invoking, so I have no other explanation for that.


Could you post the simplest reproduction possible? It sounds like a bug. Nevermind I assumed you were using browser-window but you probably aren’t.


I’m using browser-window as in require('browser-window'), if that’s what you mean.

As far as I’m aware, backspace === ‘go back a page’ is still the case in Chrome, and I don’t see why Electron would be any different. It’d be nice if it wasn’t part of either though.

I am behind by 7 releases minor releases, but from what I can tell, it’s not something that has been changed in the project. (That being said, it has explained why I’ve been unable to get some other things working.)


Can you reproduce it in the default “drag your app here” app you get by running I cannot.


Yep. I’ve been using Electron my/project/path in my CLI, but I’m getting the same behaviour just from Electron and dragging and droppping.


Then your Electron must be pretty old.


My bad! I did mention I was back a fair few versions, but I didn’t come across this when I was looking back through releases. My version is older than when this was fixed.

Thanks, sorry for being such a time-waster!