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:
But its major disadvantage is it shows the typed character(s) briefly before removing them, which makes it look very hackish and unprofessional.
This question is related to
javascript
html
masking
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.
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
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.
Use this JavaScript.
$(":input").inputmask();
$("#phone").inputmask({"mask": "(999) 999-9999"});
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" />
Source: Stackoverflow.com