Filter right and left arrow keys on events of type keypress - Githubissues

jondavidjohn / payform

:credit_card: A library for building credit card forms, validating inputs, and formatting numbers.

https://jondavidjohn.github.io/payform/

Other

427 stars 81 forks source link

Filter right and left arrow keys on events of type keypress #45

Closed ddayguerrero closed 6 years ago

ddayguerrero commented 6 years ago

Changes

Allow right and left arrow key to be used while navigating inside all input types (e.g. cvc, expiry, card number and numeric)

Why introduce these changes?

Firefox (with vendored payform) currently does not allow users to perform arrow key navigation because keypress keyboard events are surfaced in the event handler that restricts all non-numeric keys (with some exceptions). keypress events are not raised in Chrome, Safari and Firefox

How is this achieved?

In the restrictNumeric keyPress event handler, we can filter out right and left arrow keys key codes (i.e. 37 and 39)
Extract key codes used in all comparison operators into a global variable called keyCodes and use it instead of using number types and in-line comments. While it may not be the most performant, it keeps in mind legacy browser support (i.e. IE < 8)

arthurgouveia commented 6 years ago

Tested this out locally and works like a charm 👍