Implement an input with a mask

Question

I would like to implement a mask for a text input field which accepts a date  The masked value should display directly inside of the input   Something like this    lt input type  text  value              gt    I wrote the mask as a value in that example  but my intent is to allow people to write a date without typing   or - to separate months  years and days  The user should be able to enter numbers into the displayed field  while the mask enforces the format automatically as the user types   I have seen this behavior on other sites  but I have no idea how it works or how to implement it myself

User · Answer

Array prototype forEach call document body querySelectorAll    data-mask     applyDataMask    function applyDataMask field        var mask   field dataset mask split              For now  this just strips everything that s not a number     function stripMask maskedData            function isDigit char                return   d  test char                     return maskedData split     filter isDigit                 Replace     characters with characters from  data      function applyMask data            return mask map function char                if  char         return char              if  data length    0  return char              return data shift               join                function reapplyMask data            return applyMask stripMask data               function changed                var oldStart   field selectionStart          var oldEnd   field selectionEnd           field value   reapplyMask field value            field selectionStart   oldStart          field selectionEnd   oldEnd             field addEventListener  click   changed      field addEventListener  keyup   changed      Date   lt input type  text  value    -  -      data-mask    -  -       gt  lt br  gt  Telephone   lt input type  text  value           -      data-mask           -       gt  lt br  gt

User · Answer

After reading all post  I did my own implementation  I hope to help to someone   The idea is     allow entry only numbers   keypress event   get all numbers in a array replace every      character of mask by a number from     array in a loop   Improvements are welcome    x000D   x000D      x000D     charCode  48 57   Numbers 0 to 9 x000D     keyCode 46      delete  x000D     keyCode 9      tab  x000D     keyCode 13      enter  x000D     keyCode 116     F5  x000D     keyCode 8      backscape  x000D     keyCode 37 38 39 40 Arrows x000D     keyCode 10    LF  x000D      x000D  function validate int myEvento    x000D    if   myEvento charCode  gt   48  amp  amp  myEvento charCode  lt   57     myEvento keyCode    9    myEvento keyCode    10    myEvento keyCode    13    myEvento keyCode    8    myEvento keyCode    116    myEvento keyCode    46     myEvento keyCode  lt   40  amp  amp  myEvento keyCode  gt   37     x000D      dato   true  x000D      else   x000D      dato   false  x000D      x000D    return dato  x000D    x000D   x000D  function phone number mask     x000D    var myMask             -       x000D    var myCaja   document getElementById  phone    x000D    var myText       x000D    var myNumbers       x000D    var myOutPut      x000D    var theLastPos   1  x000D    myText   myCaja value  x000D      get numbers x000D    for  var i   0  i  lt  myText length  i      x000D      if   isNaN myText charAt i    amp  amp  myText charAt i            x000D        myNumbers push myText charAt i    x000D        x000D      x000D      write over mask x000D    for  var j   0  j  lt  myMask length  j      x000D      if  myMask charAt j              replace     by a number  x000D        if  myNumbers length    0  x000D          myOutPut   myOutPut   myMask charAt j   x000D        else   x000D          myOutPut   myOutPut   myNumbers shift    x000D          theLastPos   j   1    set caret position x000D          x000D        else   x000D        myOutPut   myOutPut   myMask charAt j   x000D        x000D      x000D    document getElementById  phone   value   myOutPut  x000D    document getElementById  phone   setSelectionRange theLastPos  theLastPos   x000D    x000D   x000D  document getElementById  phone   onkeypress   validate int  x000D  document getElementById  phone   onkeyup   phone number mask  x000D   lt input type  text  name  phone  id  phone  placeholder   123  456-7890  required  required  title  e g  123  456-7890  pattern      0-9  3    s 0-9  3 - 0-9  4    gt  x000D   x000D   x000D

User · Answer

Use this to implement mask  https   rawgit com RobinHerbots jquery inputmask 3 x dist jquery inputmask bundle js  lt input id  quot phn-number quot  class  quot ant-input quot  type  quot text quot  placeholder  quot  XXX  XXX-XXXX quot  data-inputmask-mask  quot  999  999-9999 quot  gt    jQuery    phn-number data-inputmask-mask     inputmask

User · Answer

Below i describe my method  I set event on input in input  to call Masking   method  which will return an formatted string of that we insert in input   Html    lt input name  phone  pattern   373             class  masked  required gt    JQ   Here we set event on input       masked   on  input   function          var input     this       input val Masking input val    input attr  pattern            JS  Function  which will format string by pattern   function Masking  value  pattern    var out       var space        var any         for  var i   0  j   0  j  lt  value length  i    j          if  value j      pattern i             out    value j             else if pattern i      any  amp  amp  value j      space            out    value j             else if pattern i      space  amp  amp  value j      space            out    space          j--            else if pattern i      any  amp  amp  pattern i      space            out    pattern i           j--           return out

User · Answer

Input masks can be implemented using a combination of the keyup event  and the HTMLInputElement value  selectionStart  and selectionEnd properties  Here s a very simple implementation which does some of what you want  It s certainly not perfect  but works well enough to demonstrate the principle    x000D   x000D  Array prototype forEach call document body querySelectorAll    data-mask     applyDataMask   x000D   x000D  function applyDataMask field    x000D      var mask   field dataset mask split      x000D       x000D         For now  this just strips everything that s not a number x000D      function stripMask maskedData    x000D          function isDigit char    x000D              return   d  test char   x000D            x000D          return maskedData split     filter isDigit   x000D        x000D       x000D         Replace     characters with characters from  data  x000D      function applyMask data    x000D          return mask map function char    x000D              if  char         return char  x000D              if  data length    0  return char  x000D              return data shift    x000D             join     x000D        x000D       x000D      function reapplyMask data    x000D          return applyMask stripMask data    x000D        x000D       x000D      function changed        x000D          var oldStart   field selectionStart  x000D          var oldEnd   field selectionEnd  x000D           x000D          field value   reapplyMask field value   x000D           x000D          field selectionStart   oldStart  x000D          field selectionEnd   oldEnd  x000D        x000D       x000D      field addEventListener  click   changed  x000D      field addEventListener  keyup   changed  x000D    x000D  ISO Date   lt input type  text  value      -  -    data-mask      -  -     gt  lt br  gt  x000D  Telephone   lt input type  text  value           -      data-mask           -       gt  lt br  gt  x000D   x000D   x000D     View in JSFiddle   There are also a number of libraries out there which perform this function  Some examples include    jquery inputmask MASKED INPUT PLUGIN Politespace  presents an alternative to input masks

User · Answer

I taken from this thread decision Implement an input with a mask and adapted it for IE10  and added setter- and getter- functions   BUT I TESTED FOR PHONE-mask ONLY    document  ready function        var el arr   document querySelectorAll   placeholder  data-slots         for  var el ind 0  el ind  lt  el arr length  el ind              var el   el arr el ind           var pattern   el getAttribute  placeholder                slots   new Set el getAttribute  data-slots                        prev   function j  return Array from pattern  function c i   return slots has c   j i 1  j      0               first   pattern split     findIndex function c  return slots has c                   accept   new RegExp el getAttribute  data-accept         d    g                clean   function input  input   input match accept        return Array from pattern  function c  return input 0      c    slots has c    input shift      c   c                   format   function                    var elem   this                  var i j arr    el selectionStart  el selectionEnd  map function i                       i   clean el value slice 0  i   findIndex function c   return slots has c                          return i lt 0  prev prev length-1   elem back  prev i-1     first  i                                      el value   clean el value  join                      el setSelectionRange i j arr 0   i j arr 1                    this back   false                                sdo added             get masked value   function                    var input   this value                  var ret                     for var k in pattern                       if    input k   break                      if  slots has pattern k    amp  amp  input k   pattern k                            ret push input k                                                              return ret join                                 set masked value   function input                   var ret                     var index in value   0                  for var k in pattern                       if  slots has pattern k    amp  amp  input index in value                            ret push input index in value                            index in value                                              else                          ret push pattern k                                                             this value   ret join                                                          el get masked value   get masked value          el set masked value   set masked value          el back   false          el addEventListener  keydown   function event   this back   event key      Backspace              el addEventListener  input   format           el addEventListener  focus   format           el addEventListener  blur   function     return el value     pattern  amp  amp   el value

User · Answer

You can also try my implementation  which doesn t have delay after each key press when typing the contents  and has full support for backspace and delete   You can try it online   https   jsfiddle net qmyo6a1h 1        lt html gt       lt style gt      input        font-family  monospace              lt  style gt       lt body gt         lt input type  text  id  phone  placeholder  123-5678-1234  title  123-5678-1234  input-mask     -    -      gt         lt input type  button  onClick  showValue phone    value  Show Value    gt         lt input type  text  id  console phone    gt         lt script gt          function InputMask element              var self   this             self element   element             self mask   element attributes  input-mask   nodeValue             self inputBuffer                  self cursorPosition   0             self bufferCursorPosition   0             self dataLength   getDataLength               function getDataLength                 var ret   0               for  var i   0  i  lt  self mask length  i                    if  self mask charAt i                            ret                                               return ret                         self keyEventHandler   function  obj                obj preventDefault                 self updateBuffer obj               self manageCursor obj               self render                self moveCursor                           self updateBufferPosition   function                  var selectionStart   self element selectionStart              self bufferCursorPosition   self displayPosToBufferPos selectionStart               console log  self bufferCursorPosition      self bufferCursorPosition                          self onClick   function                  self updateBufferPosition                           self updateBuffer   function  obj                if  obj keyCode    8                  self inputBuffer   self inputBuffer substring 0  self bufferCursorPosition - 1    self inputBuffer substring self bufferCursorPosition                             else if  obj keyCode    46                  self inputBuffer   self inputBuffer substring 0  self bufferCursorPosition    self inputBuffer substring self bufferCursorPosition   1                             else if  obj keyCode  gt   37  amp  amp  obj keyCode  lt   40                    do nothing on cursor keys                            else                 var selectionStart   self element selectionStart                var bufferCursorPosition   self displayPosToBufferPos selectionStart                 self inputBuffer   self inputBuffer substring 0  bufferCursorPosition    String fromCharCode obj which    self inputBuffer substring bufferCursorPosition                 if  self inputBuffer length  gt  self dataLength                    self inputBuffer   self inputBuffer substring 0  self dataLength                                                        self manageCursor   function  obj                console log obj keyCode               if  obj keyCode    8                  self bufferCursorPosition--                            else if  obj keyCode    46                    do nothing on delete key                            else if  obj keyCode  gt   37  amp  amp  obj keyCode  lt   40                  if  obj keyCode    37                    self bufferCursorPosition--                                else if  obj keyCode    39                    self bufferCursorPosition                                              else                 var bufferCursorPosition   self displayPosToBufferPos self element selectionStart                 self bufferCursorPosition   bufferCursorPosition   1                                       self setCursorByBuffer   function  bufferCursorPosition                var displayCursorPos   self bufferPosToDisplayPos bufferCursorPosition               self element setSelectionRange displayCursorPos  displayCursorPos                          self moveCursor   function                  self setCursorByBuffer self bufferCursorPosition                          self render   function                  var bufferCopy   self inputBuffer              var ret                   muskifiedValue                                 var lastChar   0               for  var i   0  i  lt  self mask length  i                    if  self mask charAt i          amp  amp                  bufferCopy                    ret muskifiedValue    bufferCopy charAt 0                   bufferCopy   bufferCopy substr 1                   lastChar   i                                else                   ret muskifiedValue    self mask charAt i                                              self element value   ret muskifiedValue                          self preceedingMaskCharCount   function  displayCursorPos                var lastCharIndex   0              var ret   0               for  var i   0  i  lt  self element value length  i                    if  self element value charAt i                            i  gt  displayCursorPos - 1                    lastCharIndex   i                  break                                             if  self mask charAt lastCharIndex - 1                          var i   lastCharIndex - 1                while  self mask charAt i                            i--                  if  i  lt  0  break                  ret                                               return ret                         self leadingMaskCharCount   function  displayIndex                var ret   0               for  var i   displayIndex  i  gt   0  i--                  if  i  gt   self mask length                    continue                                if  self mask charAt i                            ret                                               return ret                         self bufferPosToDisplayPos   function  bufferIndex                var offset   0              var indexInBuffer   0               for  var i   0  i  lt  self mask length  i                    if  indexInBuffer  gt  bufferIndex                    break                                 if  self mask charAt i                            offset                    continue                                 indexInBuffer                              var ret   bufferIndex   offset               return ret                         self displayPosToBufferPos   function  displayIndex                var offset   0              var indexInBuffer   0               for  var i   0  i  lt  self mask length  amp  amp  i  lt   displayIndex  i                    if  indexInBuffer  gt   self inputBuffer length                    break                                 if  self mask charAt i                            offset                    continue                                 indexInBuffer                               return displayIndex - offset                         self getValue   function                  return this inputBuffer                        self element onkeypress   self keyEventHandler            self element onclick   self onClick                     function InputMaskManager               var self   this             self instances                  self add   function  id                var elem   document getElementById id               var maskInstance   new InputMask elem               self instances id    maskInstance                         self getValue   function  id                return self instances id  getValue                           document onkeydown   function  obj                if  obj target attributes  input-mask                    if  obj keyCode    8                    obj keyCode    46                     obj keyCode  gt   37  amp  amp  obj keyCode  lt   40                      if  obj keyCode    8    obj keyCode    46                      obj preventDefault                                         needs to broadcast to all instances here                  var keys   Object keys self instances                   for  var i   0  i  lt  keys length  i                        if  self instances keys i   element id    obj target id                        self instances keys i   keyEventHandler obj                                                                                                        Initialize an instance of InputMaskManager and           add masker instances by passing in the DOM ids           of each HTML counterpart          var maskMgr   new InputMaskManager            maskMgr add  phone             function showValue phone                 -------------------------------------------------------  Value Here                document getElementById  console phone   value   maskMgr getValue  phone                     lt  script gt       lt  body gt        lt  html gt

User · Answer

I wrote a similar solution some time ago  Of course it s just a PoC and can be improved further   This solution covers the following features    Seamless character input Pattern customization Live validation while you typing Full date validation  including correct days in each month and a leap year consideration  Descriptive errors  so the user will understand what is going on while he is unable to type a character Fix cursor position and prevent selections Show placeholder if the value is empty    x000D   x000D  const pattern                 x000D  const patternFreeChar        x000D  const validDate     x000D       0-3     x000D       0 1-9   12  d 3 01      x000D       0 1-9   12  d 3 01   01     x000D        0 1-9   12  d 3 01   0 13578  1 02    0 1-9   12  d 30  0 469  11   0 1-9   12  d 02     x000D        0 1-9   12  d 3 01   0 13578  1 02    0 1-9   12  d 30  0 469  11   0 1-9   12  d 02  12     x000D        0 1-9   12  d 3 01   0 13578  1 02    0 1-9   12  d 30  0 469  11   0 1-9   12  d 02  19 20   x000D    x000D   x000D      x000D     Validate a date as your type  x000D      param  string  date The date in format DDMMYYYY as a string representation  x000D      throws  Error  When the date is invalid  x000D      x000D  function validateStartTypingDate date    x000D    if    date   return     x000D     x000D    date   date substr 0  8   x000D     x000D    if       d    test date    x000D     throw new Error  Please type numbers only    x000D     x000D   if    validDate Math min date length-1 validDate length-1   test date      x000D      let errMsg       x000D      switch   date length     x000D       case 1  x000D         throw new Error  Day in month can start only with 0  1  2 or 3    x000D           x000D       case 2  x000D         throw new Error  Day in month must be in a range between 01 and 31    x000D           x000D       case 3  x000D         throw new Error  Month can start only with 0 or 1    x000D           x000D       case 4    x000D         const day   parseInt date substr 0 2    x000D         const month   parseInt date substr 2 2    x000D          const monthName   new Date 0 month-1  toLocaleString  en-us   month  long     x000D           x000D          if   month  lt  1    month  gt  12   x000D           throw new Error  Month number must be in a range between 01 and 12    x000D             x000D          if   day  gt  30  amp  amp   4 6 9 11  includes month    x000D           throw new Error    monthName  have maximum 30 days    x000D             x000D          if   day  gt  29  amp  amp  month     2   x000D           throw new Error    monthName  have maximum 29 days    x000D          break   x000D          x000D            x000D        case 5  x000D        case 6  x000D         throw new Error  We support only years between 1900 and 2099  so the full year can start only with 19 or 20    x000D        x000D      x000D     x000D    if   date length     8     x000D     const day   parseInt date substr 0 2    x000D      const month   parseInt date substr 2 2    x000D      const year   parseInt date substr 4 4    x000D      const monthName   new Date 0 month-1  toLocaleString  en-us   month  long     x000D      if    isLeap year   amp  amp  month     2  amp  amp  day     29   x000D        throw new Error  The year you are trying to enter    year   is not a leap year  Thus  in this year    monthName  can have maximum 28 days    x000D      x000D     x000D    return date  x000D    x000D   x000D      x000D     Check whether the given year is a leap year  x000D      x000D  function isLeap year    x000D    return new Date year  1  29  getDate       29  x000D    x000D   x000D      x000D     Move cursor to the end of the provided input element  x000D      x000D  function moveCursorToEnd el    x000D   if  typeof el selectionStart     number     x000D    el selectionStart   el selectionEnd   el value length  x000D     else if  typeof el createTextRange     undefined     x000D    el focus    x000D    var range   el createTextRange    x000D    range collapse false   x000D    range select    x000D     x000D    x000D   x000D      x000D     Move cursor to the end of the self input element  x000D      x000D  function selfMoveCursorToEnd     x000D   return moveCursorToEnd this   x000D    x000D   x000D  const input   document querySelector  input   x000D   x000D  input addEventListener  keydown   function event   x000D   event preventDefault    x000D    document getElementById  date-error-msg   innerText       x000D     x000D       On digit pressed x000D    let inputMemory   this dataset inputMemory        x000D     x000D    if   event key length     1     x000D      try   x000D        inputMemory   validateStartTypingDate inputMemory   event key   x000D        catch  err    x000D        document getElementById  date-error-msg   innerText   err message  x000D        x000D      x000D     x000D       On backspace pressed x000D    if   event code      Backspace      x000D     inputMemory   inputMemory slice 0  -1   x000D      x000D     x000D       Build an output using a pattern x000D    if   this dataset inputMemory     inputMemory     x000D     let output   pattern  x000D     for   let i 0  digit  i lt inputMemory length  digit inputMemory i   i       x000D       output   output replace patternFreeChar  digit   x000D        x000D      this dataset inputMemory   inputMemory  x000D      this value   output  x000D      x000D     x000D       Clean the value if the memory is empty x000D    if   inputMemory            x000D     this value       x000D      x000D     false   x000D   x000D  input addEventListener  select   selfMoveCursorToEnd  false   x000D  input addEventListener  mousedown   selfMoveCursorToEnd  false   x000D  input addEventListener  mouseup   selfMoveCursorToEnd  false   x000D  input addEventListener  click   selfMoveCursorToEnd  false   x000D   lt input type  text  placeholder  DD MM YYYY    gt  x000D   lt div id  date-error-msg  gt  lt  div gt  x000D   x000D   x000D    A link to jsfiddle  https   jsfiddle net d1xbpw8f 56   Good luck

User · Answer

A solution that responds to the input event instead of key events  like keyup  will give a smooth experience  no wiggles   and also works when changes are made without the keyboard  context menu  mouse drag  other device       The code below will look for input elements that have both a placeholder attribute and a data-slots attribute  The latter should define the character s  in the placeholder that is are intended as input slot  for example       An optional data-accept attribute can be provided with a regular expression that defines which characters are allowed in such a slot  The default is  d  i e  digits    x000D   x000D     This code empowers all input tags having a placeholder and data-slots attribute x000D  document addEventListener  DOMContentLoaded        gt    x000D      for  const el of document querySelectorAll   placeholder  data-slots       x000D          const pattern   el getAttribute  placeholder    x000D              slots   new Set el dataset slots          x000D              prev    j   gt  Array from pattern   c i    gt  slots has c   j i 1  j   0   x000D              first       pattern  findIndex c   gt  slots has c    x000D              accept   new RegExp el dataset accept       d    g    x000D              clean   input   gt    x000D                  input   input match accept         x000D                  return Array from pattern  c   gt  x000D                      input 0      c    slots has c    input shift      c   c x000D                     x000D                 x000D              format        gt    x000D                  const  i  j     el selectionStart  el selectionEnd  map i   gt    x000D                      i   clean el value slice 0  i   findIndex c   gt  slots has c    x000D                      return i lt 0  prev prev length-1   back  prev i-1     first  i  x000D                      x000D                  el value   clean el value  join    x000D                  el setSelectionRange i  j   x000D                  back   false  x000D                 x000D          let back   false  x000D          el addEventListener  keydown    e    gt  back   e key      Backspace    x000D          el addEventListener  input   format   x000D          el addEventListener  focus   format   x000D          el addEventListener  blur        gt  el value     pattern  amp  amp   el value       x000D        x000D      x000D   data-slots    font-family  monospace   x000D   lt label gt Date time   x000D       lt input placeholder  dd mm yyyy hh mm  data-slots  dmyh  gt  x000D   lt  label gt  lt br gt  x000D   lt label gt Telephone  x000D       lt input placeholder   1          -      data-slots     gt  x000D   lt  label gt  lt br gt  x000D   lt label gt MAC Address  x000D       lt input placeholder  XX XX XX XX XX XX  data-slots  X  data-accept    dA-H   gt  x000D   lt  label gt  lt br gt  x000D   lt label gt Signed number  3 digits   x000D       lt input placeholder         data-slots       data-accept     -        d  size  4  gt  x000D   lt  label gt  lt br gt  x000D   lt label gt Alphanumeric  x000D       lt input placeholder    -  -  -      data-slots     data-accept   w  size  13  gt  x000D   lt  label gt  lt br gt  x000D   x000D   x000D

User · Answer

You can achieve this also by using JavaScripts s native method  Its pretty simple and doesn t require any extra library to import    lt input type  text  name  date  placeholder  yyyy-mm-dd  onkeyup     var date   this value    if  date match    d 4         null         this value   date    -       else if  date match    d 4  - d 2         null         this value   date    -        maxlength  10  gt

[html] Implement an input with a mask

Examples related to html

Examples related to date

Examples related to input

Examples related to mask

Examples related to data-masking