Suppressing backspace, etc as browser controls


#1

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.


#2

You can do something like

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

  // handle backspace event
});

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


#3

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.


#4

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


#5

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.


#6

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.


#7

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.)


#8

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


#9

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.


#10

Then your Electron must be pretty old.


#11

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!