JavaScript Events Unmasked: How to Create an Input Mask for Mobile

Glauber Corrêa
Aug 8, 2017 · 10 min read
Image for post
Image for post

Introducing Keyboard Events

Let me introduce you to keyboard events. They are triggered by interacting with a physical or virtual key:

  • Pressing down a printable key triggers the keypress event.
  • Releasing a key triggers the keyup event.
  • charCode indicates the ASCII value of the character associated with the pressed key. This property distinguishes between lowercase and uppercase.
  • key returns the value of the pressed key. If you press the lowercase a key this property will return the letter a, instead of a code representation of the key.
  • which returns the numeric keyCode of the key pressed or the charCode for an alphanumeric key.
  • keyIdentifier returns a string representation of the pressed key.
  • code represents a physical key on the keyboard. This property returns a value that isn’t altered by the keyboard layout or the state of the modifier keys.

Introducing (Paranoid) Android Problems

Well, now that we know what it takes to trigger a keyboard event and how to identify the key that was pressed, it should be a snap to do the necessary validations for the mask. Right?

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Introducing the Input Event

The input event is fired whenever we type something, meaning the value of an <input>, <select>, or <textarea> element is changed. The event is fired in all listed browsers. But, it doesn’t return the same properties as the keyboard events, because this event is not triggered by keyboard actions. Instead it’s triggered by the result of those actions. You can check the Mozilla Developer Network website to see its properties.

Event Order

When we press a key and then release it, there are four events triggered in the following order:

This is How You Handle Android keyCode 229

Now that you know the input event and the order of events, let’s talk about the workaround for the Android 229 bug.

Image for post
Image for post

These Are the Requirements for the Input Mask

OK, so now that we’ve got a few things out of the way, and we are able to trigger the events and get the pressed key, we can actually start building the mask. But which mask?

  • Add the separator “ “ (space) for every group of 4 digits
  • Should work with copy-paste values
  • If the pasted value has unallowed keys, the mask should remove those keys and mask only the digit part that remains

Credit Card Input Mask: Let’s Get Coding!

For this case, we are going to create and work with two functions: one to mask the input value and another one to unmask it, and we’re gonna call them in this order.

Image for post
Image for post

The Mask Function

This function must add separators between every group of four digits. To find it, you need to check whether the remainder of the division (represented by %) of the index/interval (four groups of four digits) is equal to zero. Read more about the modulus operator.

Image for post
Image for post

The Unmask Function

This function is simpler. It prepares the value to be masked again. It implies replacing every non-digit character to “” (empty value).

Character Limit

The credit card mask only allows 16 digits. To limit the character insertion, we are going to create a new regex rule and check if the unmasked value matches the regex. If true, the value can be masked and printed again. If false, the value is the old one.

Cursor Position

Depending on how well you tested the mask, you saw a cursor positioning problem. Whenever you set a new input value programmatically using JavaScript, the cursor will be positioned at the end of the string. So, you will need to position it by yourself.

Image for post
Image for post
  • selectionEnd: Get the end of the selected portion of the field’s text.
Image for post
Image for post
Image for post
Image for post

Keyboard Types in Mobile Applications

When you type a credit card number, the keyboard must be the numerical one. If you test the mask in your device, you will have the alphanumeric keyboard at your disposal. This happens because the input type is text and the input type defines which virtual keyboard type is displayed. My first thought was to change the input type to number, so that the HTML would force the keyboard to be the numerical one.

The Output of the Input Mask

As you can see, creating an input mask is no walk in the park. What I thought would be a nice relaxing stroll ended up being one long marathon in the forest. At night. During the new moon. So it was dark. And I was alone. OK, you get it.

References and Further Reading

OutSystems Experts

Digital transformation with a low-code platform…

Glauber Corrêa

Written by

Front-End developer, who found in his job a way to combine two of his passions: technology and development.

OutSystems Experts

Digital transformation with a low-code platform meticulously designed, engineered and crafted by engineers for engineers.

Glauber Corrêa

Written by

Front-End developer, who found in his job a way to combine two of his passions: technology and development.

OutSystems Experts

Digital transformation with a low-code platform meticulously designed, engineered and crafted by engineers for engineers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store