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

Question

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.

Question probably means allowing only certain characters to appear in the text field, for example, numbers and (-) for telephone inputs — Heitor Chang, Jun 04 '12 at 20:13
i think he means [mask](http://en.wikipedia.org/wiki/Input_mask), not [mask](http://en.wikipedia.org/wiki/Mask) — jbabey, Jun 04 '12 at 20:14
Still have to do onkeydown (see https://stackoverflow.com/questions/15728261/how-to-prevent-number-input-on-keydown) unless you want reg-ex style filtering like discussed below. — thecoolmacdude, Sep 01 '17 at 21:09

saluce · Accepted Answer · 2014-03-18T14:39:38.657

14

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.

edited Mar 18 '14 at 14:39

answered Jun 04 '12 at 20:21

saluce

13,035
3
50
67

4

To improve answer, should give an example of trapping onkeydown. – thecoolmacdude Sep 01 '17 at 21:01

score 9 · Answer 2 · answered Mar 16 '14 at 13:19

Basic validation can be performed by choosing the type attribute of input elements. For example: <input type="email" /> <input type="URL" /> <input type="number" />
using pattern attribute like: <input type="text" pattern="[1-4]{5}" />
required attribute <input type="text" required />
maxlength: <input type="text" maxlength="20" />
min & max: <input type="number" min="1" max="4" />

score 6 · Answer 3 · answered Jun 04 '12 at 20:19

6

Yes, according to HTML5 drafts you can use the pattern attribute to specify the allowed input using a regular expression. For some types of data, you can use special input fields like <input type=email>. But these features still widely lack support or have qualitatively poor support.

answered Jun 04 '12 at 20:19

Jukka K. Korpela

195,524
37
270
390

Ah great! That's exactly the kind of thing I was hoping there might be. My google searches didn't turn up anything. Unfortunately it doesn't seem to be very widely adopted yet. – devios1 Jun 04 '12 at 20:23
1

@chaiguy, The `attr-input-pattern` from the [W3C Working Draft 29 March 2012](http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-pattern) ! – Zuul Jun 04 '12 at 20:36
Unfortunately the spec only appears to define when an element is suffering from pattern mismatch, not how the browser should handle it. Ideally it would block the input from ever taking place, but it could just result in a red border or something silly like that. – devios1 Jun 04 '12 at 20:43

Stephen Romero · Answer 4 · 2019-07-22T13:22:27.620

5

A little late, but a useful plugin that will actually use a mask to give a bit more restriction on user input.

<div class="col-sm-3 col-md-6 col-lg-4">
  <div class="form-group">
     <label for="addPhone">Phone Number *</label>
      <input id="addPhone" name="addPhone" type="text" class="form-control 
       required" data-mask="(999) 999-9999"placeholder>
    <span class="help-block">(999) 999-9999</span>
  </div>
</div>

 <!-- Input Mask -->
 <script src="js/plugins/jasny/jasny-bootstrap.min.js"></script>

More info on the plugin https://www.jasny.net/bootstrap/2.3.1/javascript.html#inputmask

edited Jul 22 '19 at 13:22

answered Jan 25 '18 at 14:47

Stephen Romero

2,812
4
25
48

This works well for data that is left aligned text. But if one wants a decimal number with only two decimal places after the comma, it does not fit. – sergiol Nov 23 '22 at 00:52
@sergiol Did you try inputting what you wanted in the data-mask? – Stephen Romero Nov 28 '22 at 14:44

score -6 · Answer 5 · edited Nov 07 '19 at 08:16

-6

Use this JavaScript.

$(":input").inputmask();
$("#phone").inputmask({"mask": "(999) 999-9999"});

edited Nov 07 '19 at 08:16

4b0

21,981
30
95
142

answered Nov 04 '19 at 10:43

Ravi Desai

1

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

5 Answers5

Linked