Question

107

Easiest way to mask characters in HTML(5) text input

rated 0 times [ 114] [ 7] / answers: 1 / hits: 130401 / 12 Years ago, mon, june 4, 2012, 12:00:00

Does HTML5 have any kind of text field masking or do I still have to trap onkeydown etc.?

jbabey is right--masking as in blocking certain illegal characters, not hiding what's typed.

The best (as in simplest and most reliable) way I've found is to trap onkeyup and then just run a regex replace on the value of the textfield, removing any illegal characters.

This has a few advantages:

It's easy to implement (one function, two lines of code).

It's reliable and covers all cases I've thought of.

It doesn't block key commands like copy/paste, select all or arrow keys.

But its major disadvantage is it shows the typed character(s) briefly before removing them, which makes it look very hackish and unprofessional.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

sandy

Add To Favorites

Follow

Total Points: 59

Total Questions: 98

Total Answers: 98

Location: Falkland Islands

Member since Mon, Jul 13, 2020

4 Years ago

answered 12 Years ago cristinadomoniquel · Accepted Answer

Look up the new HTML5 Input Types. These instruct browsers to perform client-side filtering of data, but the implementation is incomplete across different browsers. The pattern attribute will do regex-style filtering, but, again, browsers don't fully (or at all) support it.

However, these won't block the input itself, it will simply prevent submitting the form with the invalid data. You'll still need to trap the onkeydown event to block key input before it displays on the screen.