How to cancel backspace key from navigating back…

t3chnology scouting GmbH

SIDEBAR

»
S
I
D
E
B
A
R
«

March 21st, 2012 by P.G.Taboada

Don’t ask me who had the insane idea that one can navigate back when pressing the back space.

In GWT we did something like that to cancel the backspace back navigation:

Event.addNativePreviewHandler(new NativePreviewHandler() {
    @Override
    public void onPreviewNativeEvent(NativePreviewEvent event) {
        if (event.getNativeEvent().getKeyCode() == KeyCodes.KEY_BACKSPACE) {
            if (event.getNativeEvent().getEventTarget() != null) {
                Element as = Element.as(event.getNativeEvent().getEventTarget());
                if (as == RootPanel.getBodyElement()) {
                    event.getNativeEvent().stopPropagation();
                    event.getNativeEvent().preventDefault();
                }
            }

        }
    }
});

Event.addNativePreviewHandler(new NativePreviewHandler() {

@Override

public void onPreviewNativeEvent(NativePreviewEvent event) {

if (event.getNativeEvent().getKeyCode() == KeyCodes.KEY_BACKSPACE) {

if (event.getNativeEvent().getEventTarget() != null) {

Element as = Element.as(event.getNativeEvent().getEventTarget());

if (as == RootPanel.getBodyElement()) {

event.getNativeEvent().stopPropagation();

event.getNativeEvent().preventDefault();

}

});

3 Responses

Frank Hossfeld writes:
March 23rd, 201211:56at

Cool, this improves usablilty.

But, if the focus is set to something else than the body, it will not work. So, I think, it will be better to define, where the backspace is allowed and where not.

if (as.getTagName().toLowerCase().equals(“input”) ||
as.getTagName().toLowerCase().equals(“textarea”)) {
// Backspace allowed
;
} else {
event.getNativeEvent().stopPropagation();
event.getNativeEvent().preventDefault();
}

What do you think?
ABhijit Dutta writes:
August 29th, 201204:47at

Can we see a sample program where it was used?
Petar writes:
February 22nd, 201312:03at

Thanks for this nice part of code :)

I changed a little bit and it works for me very nice. Here is my changes:

Element as = Element.as(event.getNativeEvent().getEventTarget());

boolean readOnly = as.getPropertyBoolean(“readOnly”);
boolean contentEditable = as.getPropertyBoolean(“isContentEditable”);
if (readOnly || !contentEditable) {
event.getNativeEvent().stopPropagation();
event.getNativeEvent().preventDefault();
}

Share this: