I cant make inputmask to work with vanilla JS

Question

I would like to use inputmask without jquery loaded and directly in the browser with vanilla JS. But it seems to always require jQuery:

var selector = document.getElementById("gg");
Inputmask({mask:"9999"}).mask(selector);

<script src="https://rawgit.com/RobinHerbots/Inputmask/5.x/dist/inputmask.min.js"></script>
<input type="text" id="gg">

(Open console and you will see Uncaught ReferenceError: $ is not defined)

Any ideas?

The error seems like you are not loading `jQuery` properly - if you are using that for something ? Make sure you have added `jQuery CDN` in your page head so it loads. — Always Helping, Jun 27 '20 at 13:03
You have edited your question and added that sentence after i posted a comment. Make sense now. — Always Helping, Jun 27 '20 at 13:08
Does this answer your question? [How to do date masking using javascript (without JQuery)?](https://stackoverflow.com/questions/31108620/how-to-do-date-masking-using-javascript-without-jquery) — Always Helping, Jun 27 '20 at 13:09
The original question said that I needed to make it work with Vanilla JS. and the title too — Paralife, Jun 27 '20 at 13:09
Thanks for the link but i need to use the inputmask library that I mention in the question — Paralife, Jun 27 '20 at 13:11
No, I think it works with no dependency to jQuery, the first sentence in the github page is "Inputmask is a javascript library which creates an input mask. Inputmask can run against vanilla javascript, jQuery and jqlite." — Paralife, Jun 27 '20 at 13:15
I would rec-emend following that official link guides you have already to have it working somehow :) — Always Helping, Jun 27 '20 at 13:17

score 1 · Accepted Answer · answered Jun 27 '20 at 13:19

The version you're using (5.x → 5.0.4) is in beta, so it may be broken (it is). You should use the latest stable release, which is 5.0.3 as of now:

var selector = document.getElementById("gg");
Inputmask({mask:"9999"}).mask(selector);

<script src="https://rawgit.com/RobinHerbots/Inputmask/5.0.3/dist/inputmask.min.js"></script>
<input type="text" id="gg">

Vitor Wdson · Answer 2 · 2022-03-01T16:11:54.317

After searching for it for a while I decided to code my own and it worked perfectly for what I needed:

// Element constants
const maskedInputs = document.querySelectorAll('input[data-mask]')

// Base configuration for all masked inputs
for (const input of maskedInputs) {
  // Get the input's mask
  let mask = input.getAttribute('data-mask')
  // Get the input's mask reverse boolean
  const reverse = input.getAttribute('data-mask-reverse') !== null
  // Stores a boolean value to indicate if the mask ends with a numeric character
  const maskEndsWithNumber = !isNaN(mask.charAt(mask.length - 1))

  // If the data-mask-reverse attribute exists, reverse the mask string
  if (reverse) {
    mask = [...mask].reverse().join('')
  }

  // Separate the numeric parts from the mask
  const numericParts = mask.split(/[^\d]/g).filter(part => !!part.length)
  // Add the regex format to all parts
  const regexParts = numericParts.map(m => `([\\d#]\{${m.length}\})`)
  // Join the regex parts to create the final regex
  const maskRegex = new RegExp(regexParts.join(''))
  // Calculates the full length of numeric characters
  const fullLength = numericParts.join('').length
  // Initiates the group counter
  let i = 1
  // Creates the group mask string
  const maskReplace = mask.replace(/\d{1,}/g, () => `\$${i++}`)

  // Set the input's max length to the size of the mask
  input.setAttribute('maxlength', mask.length)

  // Function to handle the input events
  function maskHandler(e) {
    // Get the input's current value
    let { value } = input

    // Removes the last character if the user deleted the last non-numeric character
    if (e.type === 'keydown' && e.keyCode == 8 && isNaN(value.charAt(value.length - 1))) {
      value = value.replace(/\d[^\d]{1,}$/, '')
      e.preventDefault()
    }

    // Removes all non-numeric characters from it
    value = value.replace(/[^\d]/g, '')

    // Reverse the string if needed
    if (reverse) {
      value = [...value].reverse().join('')
    }

    // Fill the string with '#'
    value = value.padEnd(fullLength, '#')
    // Apply the mask
    value = value.replace(maskRegex, maskReplace)

    // Get the end of the numeric part (start of the '#' fill)
    const fillIndex = value.indexOf('#')
    // Checks if the fill character exists
    if (fillIndex !== -1) {
      // Remove the '#' fill
      value = value.slice(0, fillIndex)
    }

    // Assures the string ends with a numeric character
    if (maskEndsWithNumber) {
      value = value.replace(/[^\d]$/, '')
    }
    // Restore the right order of the string
    if (reverse) {
      value = [...value].reverse().join('')
    }

    // Update the input's value
    input.value = value
  }

  // Handles the onkeyup, keydown and change events on the masked input
  input.addEventListener('keyup', maskHandler)
  input.addEventListener('keydown', maskHandler)
  input.addEventListener('change', maskHandler)
}

This makes every input element with the "data-mask" attribute have the specified mask applied to it automatically. Another attributed I included was "data-mask-reverse" which is a boolean attribute for when you need the values to fill the mask in reverse (I used it for monetary values):

<!-- Mask example -->
<input type="text" data-mask="9999/9999">
<!-- Reversed mask example -->
<input type="text" data-mask="999,999,999.99" data-mask-reverse>

I cant make inputmask to work with vanilla JS

2 Answers2