Need to intercept Delete & Backspace keys in Chrome

Vaadin 6 / 7 / 8 Framework UI
1

I’m writing a custom component that extends a TextField. The control is a pretty advanced masked input text field. The one available in add-ons is not powerful enough for our needs.

This control needs to intercept the Delete and Backspace keys. I was able to do this for IE with the KeyDown handler and for Firefox with the KeyPress. Neither of these handlers seem to get called for Chrome though I do get alphanumeric KeyPress events under Chrome. The Delete and Backspace end up messing up the masked input because I could not intercept them and do a substitution instead.

Do I need to register for an event? Or am I handling the events wrong. In both cases I used getKeyCode() on the NativeEvent in the Event objects.

Thanks
James

2

Hi James,

See the
source code
 for my
ContextHelp add-on
. The code intercepting the key for triggering the help bubble can be set to backspace or delete and it works just fine in Chrome in the
demo
.

HTH,
/Jonatan

3

Jonatan

That did the trick! Thank you so much!

For others, I removed the onKeyDown override. Then I implemented the NativePreviewHandler interface and register with Event.addNativePreviewHandler(this). The only gotcha was that the handler got called twice for each key so I added the condition below around my switch statement.

if(Event.ONKEYDOWN == Event.as(e.getNativeEvent()).getTypeInt()) {
…
}

Cheers
James