I'd like to put a mask on a <input> that expects the format Nextel :
<input type="text" name="nextel">
The problem that according to site is the format of Nextel:
EithertheFleetandIDhavevariantquantitynumbers,Ihaveusedthe plugin plugin, I'm not sure such as doing from 1 to 7 for fleet.
However, I'm looking for a solution with any other plugin or even pure Javascript.
You can put three numeric type fields side by side, it may not be the best solution but it is still an alternative.
By means of 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 keypad when the user accesses the site through the cell phone.
<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>
Although there are three fields, getting the value is no problem at all. Just querySelectorAll('#nextel input') concatenating value of each.
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> You can use the browser validator with the pattern attribute. This combined with a placeholder can be a neat 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>Use VanillaMasker plugin 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><labelfor="tel">Telefone</label>
<input attrname="telephone1" type="text">I found another way to do this with the jquery input mask . Unlike the plugin you mentioned, this allows the user 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><scriptsrc="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>