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

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_

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 < 1 || month > 12 )_x000D_
         throw new Error("Month number must be in a range between 01 and 12");_x000D_
          _x000D_
        if ( day > 30 && [4,6,9,11].includes(month) )_x000D_
         throw new Error(`${monthName} have maximum 30 days`);_x000D_
          _x000D_
        if ( day > 29 && 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) && month === 2 && 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<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_

<input type="text" placeholder="DD/MM/YYYY" />_x000D_
<div id="date-error-msg"></div>

_x000D_

A link to jsfiddle: https://jsfiddle.net/d1xbpw8f/56/

Good luck!

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

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

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

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

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

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

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

[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