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

User · 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

User · Answer

Use this JavaScript       input   inputmask        phone   inputmask   mask     999  999-9999

User · Answer

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  lt input type email gt   But these features still widely lack support or have qualitatively poor support

User · Answer

Basic validation can be performed by choosing the type attribute of input elements  For example   lt input type  email    gt     lt input type  URL    gt    lt input type  number    gt  using pattern attribute like    lt input type  text  pattern   1-4  5     gt  required attribute   lt input type  text  required   gt  maxlength   lt input type  text  maxlength  20    gt  min  amp  max   lt input type  number  min  1  max  4    gt

User · Answer

A little late  but a useful plugin that will actually use a mask to give a bit more restriction on user input     lt div class  col-sm-3 col-md-6 col-lg-4  gt     lt div class  form-group  gt        lt label for  addPhone  gt Phone Number   lt  label gt         lt input id  addPhone  name  addPhone  type  text  class  form-control         required  data-mask   999  999-9999 placeholder gt       lt span class  help-block  gt  999  999-9999 lt  span gt     lt  div gt   lt  div gt     lt  -- Input Mask -- gt    lt script src  js plugins jasny jasny-bootstrap min js  gt  lt  script gt      More info on the plugin https   www jasny net bootstrap 2 3 1 javascript html inputmask

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

Examples related to javascript

Examples related to html

Examples related to masking