How to put Nextel mask in an <input> with Javascript?

Question

I’d like to put a mask on a <input> waiting for the format Nextel:

<input type="text" name="nextel">

The problem that according to the website the format of Nextel is this:

• Urban: 2 digits
• Fleet: 1 to 7 digits
• ID: 2 to 5 digits

O be the Fleet and the ID has variant quantity numbers, I have used the plugin http://github.com/igorescobar/jQuery-Mask-Plugin, I do not know how to do for example from 1 to 7 for fleet.

Yet I seek solution with any other plugin or even in pure Javascript.

Answer 1

You can put three numeric type fields side by side, it may not be the best solution but it is still an alternative.

Through the attributes min and max you can control how many digits the field can receive: if the maximum is two, then the user can enter any value between 10 and 99.

I see this as something good from the point of view of usability, after all if the field only accepts numbers nothing better than opening the numeric keyboard when the user access the site by mobile.

<div id='nextel'>
  <input type='number' min='10' max='99'>
  <input type='number' min='1'  max='9999999'>
  <input type='number' min='10' max='99999'>
</div>

As many as three fields, taking the value is no problem. Just one querySelectorAll('#nextel input') concatenating the value of each.

---

# snippet:

function getNextelNumber(){
  let nextel = '';
  for(let input of document.querySelectorAll('.nextel input'))
    nextel += input.value;
  return nextel;
}

document.querySelector('button').addEventListener('click', () => {
  alert(getNextelNumber());
});

.nextel input {
  border:none;
  border-bottom:1px solid #ccc;
  outline:none;
  width: 7ch
}

.nextel input:invalid {
  box-shadow: none;
  border-bottom-color: red
}

/* Removendo a aparência padrão do campo 'number'. */
input[type='number'] {
    -moz-appearance: textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

<div class='nextel'>
  <input type='number' min='10' max='99'>
  <input type='number' min='1'  max='9999999'>
  <input type='number' min='10' max='99999'>
</div>

<br><br>
<button>Qual é meu Nextel?</button>

Answer 2

You can use the browser validator with the attribute pattern. This combined with a placeholder can be an elegant way to solve the problem.

<form action="demo_form.asp">
  Nextel: <input type="text" name="nextel" pattern="\d{2}[*]{1}\d{1,7}[*]{1}\d{2,5}" title="Insira um nextel valido" placeholder="ZZ*XXXXXXX*YYYYY">
  <input type="submit">
</form>

Answer 3

I found another way to do this with the jquery input Mask. Unlike the plugin you mentioned, this allows you to click on the next field of the mask, from the moment the current one is valid.

 $('input[name=nextel]').inputmask("\d{2}-\d{1,7}-\d{2,5}"); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.1/jquery.inputmask.bundle.min.js"></script>

<form action="demo_form.asp">
  Nextel: <input type="text" name="nextel">
  <input type="submit">
</form>

jsfiddle

Answer 4

Use plugin Vanillamasker is pure javascript without jquery

function inputHandler(masks, max, event) {
    var c = event.target;
    var v = c.value.replace(/\D/g, '');
    var m = c.value.length > max ? 1 : 0;
    VMasker(c).unMask();
    VMasker(c).maskPattern(masks[m]);
    c.value = VMasker.toPattern(v, masks[m]);
}

var telMask = ['(99) 9999-99999', '(99) 99999-9999'];
var tel = document.querySelector('input[attrname=telephone1]');
VMasker(tel).maskPattern(telMask[0]);
tel.addEventListener('input', inputHandler.bind(undefined, telMask, 14), false);

div {
  font-family: Arial;
  padding: 5px;
  margin-bottom: 10px;
}  
input {
  box-sizing: border-box;
  padding: 10px;
  border-radius: 5px;
  border-color: black;
  width: 250px;
  font-size: 1.3em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-masker/1.1.0/vanilla-masker.min.js"></script>
<div>
<label for="tel">Telefone</label>
<input attrname="telephone1" type="text">