Phone mask with jQuery and Masked Input Plugin

Question

I have a problem masking a phone input with jQuery and Masked Input Plugin   There are 2 possible formats     XX XXXX-XXXX    XX XXXXX-XXXX   Is there any way to mask it accepting both cases   EDIT   I tried       phone   mask   99  9999-9999         telf1   mask   99  9999 -9999            telf1   mask   99  9999 -9999       But it doesn t works as I would like   The closest one was  xx xxxx-xxxxx    I would like to get  xx xxxx-xxxx when I type the 10th number  and  xx xxxxx-xxxx when I type the 11th  Is it posible

User · Answer

The best way to do it on blur is                            function formatPhone obj                            if  obj value                                                               var numbers   obj value replace   D g                                   char    0     3      6   -                                 obj value                                   upto   numbers length                                if numbers length  lt  10                                                                  upto   numbers length                                                             else                                                                upto   10                                                             for  var i   0  i  lt  upto  i                                      obj value     char i         numbers i

User · Answer

With jquery mask js  http   jsfiddle net brynner f9kd0aes   HTML   lt input type  text  class  phone  maxlength  15  value  85999998888  gt   lt input type  text  class  phone  maxlength  15  value  8533334444  gt    JS     Function function phoneMask e       var s e val        var s s replace     W   g          var n s length      if n lt 11  var m   00  0000-00000   else var m   00  00000-00000          e  mask m         Type    body   on  keyup    phone  function           phoneMask   this            On load     phone   keyup      Only jQuery  http   jsfiddle net brynner 6vbrqe6z   HTML   lt p class  phone  gt 85999998888 lt  p gt   lt p class  phone  gt 8599998888 lt  p gt    jQuery      phone   text function i  text        var n    text length -6      if n  4  var p n  else var p 5       var regex   new RegExp     d 2     d   p       d 4          var text   text replace regex     1   2- 3        return text

User · Answer

Yes use this      phone   inputmask   mask     99  9999 - 9999       Link here

User · Answer

As alternative      function FormatPhone tt e       console log e which     var t     tt     var v1   t val      var k   e which    if k  8  amp  amp  v1 length   18       e preventDefault          var q   String fromCharCode  96  lt   k  amp  amp  k  lt   105   k-48   k     if    e shiftKey     e keyCode  lt  48    e keyCode  gt  57    amp  amp   e keyCode  lt  96    e keyCode  gt  105    amp  amp  e keyCode  46  amp  amp  e keyCode  37  amp  amp  e keyCode  8  amp  amp  e keyCode  39     e preventDefault          else      setTimeout function          var v   t val          var l   v length          console log l         if k  8           if l lt 4             t val   7                       else if l   4             if isNaN q                t val   7                            else              t val   7    q                                 else if l   7             t val v                         else if l   9             t val v1     q                     else if l   13  l   16             t val v1  -  q                     else if l gt 18             v v substr 0 18             t val v                               else            if l lt 4               t val   7                                 100

User · Answer

Using jQuery Mask Plugin there is two possible ways to implement it   1- Following Anatel s recomendations  https   gist github com 3724610 5003f97804ea1e62a3182e21c3b0d3ae3b657dd9  2- Or without following Anatel s recomendations  https   gist github com igorescobar 5327820  All examples above was coded using jQuery Mask Plugin and it can be downloaded at  http   igorescobar github io jQuery-Mask-Plugin

User · Answer

Try this - http   jsfiddle net dKRGE 3       phone   mask   99  9999 9-9999         phone   on  blur   function         var last     this  val   substr    this  val   indexOf  -     1         if  last length    3             var move     this  val   substr    this  val   indexOf  -   - 1  1            var lastfour   move   last          var first     this  val   substr  0  9               this  val  first    -    lastfour

User · Answer

You can use the phone alias with Inputmask v3      phone   inputmask   alias   phone    clearIncomplete   true        x000D   x000D    function     x000D       input type  tel     inputmask   alias   phone    clearIncomplete   true     x000D      x000D   lt label for  phone  gt Phone lt  label gt  x000D       lt input name  phone  type  tel  gt  x000D   x000D   lt script src  https   code jquery com jquery-2 2 4 min js  gt  lt  script gt  x000D   lt script src  https   cdn jsdelivr net gh RobinHerbots Inputmask 3 3 7 dist inputmask inputmask js  gt  lt  script gt  x000D   lt script src  https   cdn jsdelivr net gh RobinHerbots Inputmask 3 3 7 dist inputmask inputmask extensions js  gt  lt  script gt  x000D   lt script src  https   cdn jsdelivr net gh RobinHerbots Inputmask 3 3 7 dist inputmask inputmask numeric extensions js  gt  lt  script gt  x000D   lt script src  https   cdn jsdelivr net gh RobinHerbots Inputmask 3 3 7 dist inputmask inputmask date extensions js  gt  lt  script gt  x000D   lt script src  https   cdn jsdelivr net gh RobinHerbots Inputmask 3 3 7 dist inputmask inputmask phone extensions js  gt  lt  script gt  x000D   lt script src  https   cdn jsdelivr net gh RobinHerbots Inputmask 3 3 7 dist inputmask jquery inputmask js  gt  lt  script gt  x000D   lt script src  https   cdn jsdelivr net gh RobinHerbots Inputmask 3 3 7 dist inputmask phone-codes phone js  gt  lt  script gt  x000D   x000D   x000D    https   github com RobinHerbots Inputmask aliases

User · Answer

The best way to do this is using the change event like this       phone    mask   99  9999 9-9999    on  change   function          var last     this  val   substr    this  val   indexOf  -     1         if  last length    3             var move     this  val   substr    this  val   indexOf  -   - 1  1            var lastfour   move   last          var first     this  val   substr  0  9       Change 9 to 8 if you prefer mask without space   99 9999 9-9999            this  val  first    -    lastfour              change       Trigger the event change to adjust the mask when the value comes setted  Useful on edit forms

User · Answer

You need a jQuery plugin for the mask works as well   -- HTML --    lt input type  text  id  phone  placeholder   99  9999-9999  gt   lt input type  text  id  telf1  placeholder   99  9999 -9999  gt   lt input type  text  id  telf2  placeholder   99  9999 -9999  gt    -- JAVASCRIPT --   lt script src  https   raw githubusercontent com igorescobar jQuery-Mask-Plugin master src jquery mask js  gt  lt  script gt   lt script gt    document  ready function             phone   mask   99  9999-9999             telf1   mask   99  9999 -9999                telf2   mask   99  9999 -9999          lt  script gt

User · Answer

phone   focus function e           add mask         phone            mask  quot  99  99999999 9 quot            focusin function event                          this  unmask                  this  mask  quot  99  99999999 9 quot                        focusout function event                        var phone  element              element     this               phone   element val   replace   D g                   element unmask                 if  phone length  gt  10                    element mask  quot  99  99999-999 9 quot                  else                   element mask  quot  99  9999-9999 9 quot

User · Answer

Here is a jQuery phone number mask  No plugin required  Format can be adjusted to your needs    Updated JSFiddle   HTML   lt form id  example-form  name  my-form  gt       lt input id  phone-number  name  phone-number  type  text  placeholder   XXX  XXX-XXXX  gt   lt  form gt    JavaScript      phone-number     example-form     keydown function  e        var key   e which    e charCode    e keyCode    0       phone     this           Don t let them remove the starting         if   phone val   length     1  amp  amp   key     8    key     46              phone val                return false                Reset if they highlight and type over first char      else if   phone val   charAt 0                      phone val      phone val                    Auto-format- do not expose the mask as the user begins to type     if  key     8  amp  amp  key     9            if   phone val   length     4                 phone val  phone val                             if   phone val   length     5                 phone val  phone val                                        if   phone val   length     9                 phone val  phone val      -                            Allow numeric  and tab  backspace  delete  keys only     return  key    8                 key    9                key    46                 key  gt   48  amp  amp  key  lt   57                  key  gt   96  amp  amp  key  lt   105          bind  focus click   function           phone     this        if   phone val   length     0             phone val                 else           var val    phone val             phone val     val val      Ensure cursor remains at the end            blur function           phone     this        if   phone val                       phone val

User · Answer

I was developed simple and easy masks on input field to US phone format jquery-input-mask-phone-number  Simple Add jquery-input-mask-phone-number plugin in to your HTML file and call usPhoneFormat method     document  ready function              yourphone   usPhoneFormat           format    xxx  xxx-xxxx                    Working JSFiddle Link https   jsfiddle net 1kbat1nb   NPM Reference URL https   www npmjs com package jquery-input-mask-phone-number  GitHub Reference URL https   github com rajaramtt jquery-input-mask-phone-number

User · Answer

If you don t want to show your mask as placeholder you should use jQuery Mask Plugin   The cleanest way   var options          onKeyPress  function phone  e  field  options            var masks      00  0000-00000     00  00000-0000            var mask    phone length gt 14    masks 1    masks 0               phone-input   mask mask  options                 phone-input   mask   00  0000-00000   options

User · Answer

var  phone       input id    var maskOptions    onKeyPress  function phone        var masks      00  0000-0000     00  00000-0000        mask   phone match      0-9  2    9 g            masks 1            masks 0        phone mask mask  this        phone mask   00  0000-0000   maskOptions

User · Answer

Actually the correct answer is on http   jsfiddle net HDakN   Zoltan answer will allow user entry   99  9999  and then leave the field incomplete      phone   mask   99  9999-9999 9          phone   on  blur   function         var last     this  val   substr    this  val   indexOf  -     1         if  last length    5             var move     this  val   substr    this  val   indexOf  -     1  1             var lastfour   last substr 1 4            var first     this  val   substr  0  9               this  val  first   move    -    lastfour

[javascript] Phone mask with jQuery and Masked Input Plugin

Examples related to javascript

Examples related to jquery

Examples related to input

Examples related to mask

Examples related to maskedinput