How to use input mask in Javascript for Mac ID & Phone Number

Question

I want to filter Phone numbers & Mac id from one input field... if the string starts with '00' then put a colon after every two integers with characters & if it starts with any other number did not put a colon after two numbers...

var dynamicMask = new IMask(document.getElementById('user'), {
    mask: [{
      mask: '0*:**:**:**:**:**'
    },
    {
      mask: /^\S*@?\S*$/
    }
  ]
})


<script src="https://unpkg.com/imask"></script>
<div class="form-group">
  <label>Mac id or phone</label>
  <input type="text" class="form-control" name="user" id="user" placeholder="Enter ..." />
</div>

Christopher · Answer 1 · 2021-11-09T11:53:12.553

0

It's a bit tricky to allow multiple formats depending on the values. Phone numbers have no real standard (except the starting numbers of 00 or + for international, 0 for national and 1-9 for provider/location at the beginning) and could also be of length 12 and they hardly depend on the country/provider/location of the target.

I suggest using two different input fields instead of two formations depending on the input length/value.

But something like this will do it:

<input type="text" id="user">
<script>
  /*
   * This allows:
   
   @0123456789af,  @01:23:45:67:89:af and 01:23:45:67:89:af 
      threaded as mac address
   
   any other input like:
   00:00:00:00:00 or 01:23:45:67:89:az
     handled as phone number
     (removes any non numeric value on focusout)
 */
  IMask(user, {
    mask: /[@:0-9a-f]/gi, // allow anything
    prepare(char) {
      // allow only @, :, 0-9 and a-f for input
      // this allows: @[a-f0-9]{12} values to be entered or 00:00:00:00:00:00...
      return char.replace(/[^@:0-9a-f]/i, '');
    },
    commit(value, masked) {
      // leading @ will be removed
      // check if it contains already a : and has a length of 6 sets with 2 byte length each
      if (value.split(':').length == 6 && value.split(':').every(p => p.length == 2) && !value.startsWith('@')) {
        // add an @ leading for the text below
        value = '@' + value;
      }
      value = value.replace(/:/g, '');
      const dummy = document.createElement("input");
      // required else call for IMask() on dummy won't work
      document.body.appendChild(dummy);
      dummy.setAttribute("value", value.startsWith('@') ? value.substr(1) : value);
      // length must be 12 and should not start with 00
      if (/^@[0-9a-f]{12}$/i.test(value)) {
        // remove the leading @ that was added before or by the user and add : formation
        masked._value = IMask(dummy, {
          mask: '**:**:**:**:**:**'
        })._value;
      } else {
        // filter only numbers
        masked._value = IMask(dummy, {
          mask: /.*/,
          prepare(str) {
            return str.replace(/[^0-9]/, '');
          }
        })._value;
      }
      dummy.remove();
    }
  });
</script>

edited Nov 09 '21 at 11:53

answered Nov 09 '21 at 08:55

Christopher

3,124
2
12
29

it's not working ... it's not possible that make two fields... there are two formats macid= 00:5F:56:7B:34:76 & number = 8765876875 i want to filter these two formats – Muhammad Yahya Imran Nov 09 '21 at 10:25
If you have mac addresses starting with 00, remove the `!value.startsWith("00")` check. But this produces the issue i mentioned that every phone number of length 12 will count as a mac address. – Christopher Nov 09 '21 at 10:32
phone numbers start with random numbers – Muhammad Yahya Imran Nov 09 '21 at 10:33
No. - I mentioned that already. Phone numbers can also start with 00 or 0[1-9] or [1-9]. – Christopher Nov 09 '21 at 10:35
If you can't add another input field for a different value, how about a client side checkbox to determine the value entered? Like `[ ] phone number` and change the IMask-format depending on if it's checked or not. – Christopher Nov 09 '21 at 10:42
if we identify the mac id with any special character like '@00:5F:56:7B:34:76' we wrote like that in the input field....then code easily understand this is a number or mac id... – Muhammad Yahya Imran Nov 09 '21 at 11:01
or if we said that the phone number does not start with 0...what are the changes in the code? – Muhammad Yahya Imran Nov 09 '21 at 11:18
I updated it to support various inputs handled as mac address. – Christopher Nov 09 '21 at 11:54
it's not working ... – Muhammad Yahya Imran Nov 09 '21 at 12:07
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/239038/discussion-between-christopher-and-muhammad-yahya-imran). – Christopher Nov 09 '21 at 12:07

How to use input mask in Javascript for Mac ID & Phone Number

1 Answers1