How to catch the number of digits entered by a user if Inputmask takes into account all symbols, including symbols of the mask itself

Question

I use Inputmask to create a mask for the phone input field. Everything works fine, but when I need to check how many digits are entered, the result is always 18, because all characters are taken into account, including the characters of the mask itself. How can I make a validation so that I can catch the number of digits entered by the user without taking the mask into account? I tried to do .replace() first and then catch the number, but it doesn't work

let inputs = document.querySelectorAll('input[type="tel"]')
if (inputs) {
  for (let index = 0; index < inputs.length; index++) {
    const input = inputs[index];
    let im = new Inputmask('+7 (999) 999-99-99');

    input.addEventListener('focus', function () {
        im.mask(input);
    })
    input.addEventListener('blur', function () {
        im.mask(input).remove();
    })

  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.5/jquery.inputmask.min.js"></script>

<form action="" method="POST">
  <input type="tel" required name="" class="phone" data-validate-field="tel">
  <button type="submit">submit</button>
</form>

Translated with www.DeepL.com/Translator (free version)

You could try one of these solutions https://stackoverflow.com/questions/7657824/count-the-number-of-integers-in-a-string — tprieboj, Jan 28 '22 at 16:05
as `_` is the mask character, so not allowed: `$("input").val().indexOf("_") >= 0` or count them with `$("input").val().split("_").length` — freedomn-m, Jan 28 '22 at 16:10

score 1 · Answer 1 · edited Jan 28 '22 at 16:26

1

The option you're looking for is autoUnmask. Set it to true, and you'll be able to get the value without the mask.

From docs:

Automatically unmask the value when retrieved.

See working code snippet below:

$('input[type="tel"]').inputmask('+7 (999) 999-99-99', { autoUnmask: true });

$('button[type="submit"]').on('click', () => {
  let telInput = $('input[type="tel"]').val();
  console.log(telInput);
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.7/jquery.inputmask.min.js"></script>
<form action="" method="POST">
  <input type="tel" required name="" class="phone" data-validate-field="tel">
  <button type="submit">submit</button>
</form>

edited Jan 28 '22 at 16:26

freedomn-m

27,664
8
35
57

answered Jan 28 '22 at 16:16

Pedro Estrada

49
3

Thanks! { autoUnmask: true } works fine, but now only the numbers remain in the blur event, and the mask disappears and appears only in focus. Is it possible to make the mask with the entered digits stay in place during blur? – Bessonniy Jan 28 '22 at 16:24
*but now mask hide on blur* - the input mask works exactly the same way whether this option is on or not. https://jsfiddle.net/u87jr19y/ Or is that a new, unrelated question? – freedomn-m Jan 28 '22 at 16:29
I have two more events input.addEventListener('focus', function () { im.mask(input); }) input.addEventListener('blur', function () { im.mask(input).remove(); }) – Bessonniy Jan 28 '22 at 16:39
Have you looked into the option `clearMaskOnLostFocus`? Is that the behavior you're expecting? – Pedro Estrada Jan 28 '22 at 16:41
I expect that with focus the mask is shown, and with blur (if the value is empty) the mask is hidden – Bessonniy Jan 28 '22 at 16:46
@Bessonniy that is the default behavior in the snippet I provided. I'm not following. – Pedro Estrada Jan 28 '22 at 18:17
@Bessonniy ok I think I understand now. You need to probably get rid of those `eventListeners` that you posted a couple comments ago. The on `blur` event you have is removing the mask. – Pedro Estrada Jan 28 '22 at 18:19
Yes, the blur event removes the mask when the user hasn't entered anything, that was the idea, but the problem is that the blur event should only hide the mask if input is 0. Sorry for my English – Bessonniy Jan 30 '22 at 21:54
@Bessonniy I would say that this question is "answered" and that question should be a new one. I'm still having trouble understanding your request. – Pedro Estrada Feb 01 '22 at 15:04

How to catch the number of digits entered by a user if Inputmask takes into account all symbols, including symbols of the mask itself

1 Answers1