I'm using a jQuery plugin to build an input mask with a predefined country code starting on +55.
It's working with all numbers, except for the number 5. That's the problem.
When the first number typed is 5, the output should be: +55 (5
But it doesn't.
Can I use keydown or keypress to fix this? I don't know how to do this.
https://jsfiddle.net/xyt76hLw/
let $phoneError = $('#phoneerror');
let phoneMask = function(val) {
return '+55 (00) 0 0000-0000'
};
let avoidZero = {
onKeyPress: function(val, e, field, options) {
$phoneError.text('');
if (val == "+55 (0") {
$phoneError.text("don't start with zero");
field.val((i, v) => v.substr(0, 1));
}
field.mask(phoneMask.apply({}, arguments), options)
}
};
$("input[type='tel']").mask(phoneMask, avoidZero)<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.mask/1.14.11/jquery.mask.min.js"></script>
<input pattern=".{20,}" id="phone1" name="phone1" placeholder="your phone" type="tel" />
<div id="phoneerror" style="color: #333; font-size: 14px; padding-top: 2px;"></div>There seems to be an issue with that mask lib when starting the mask with hardcoded numbers ie +55 (00)... and then entering the first digit as 5, for some reason it doesnt trigger the mask. But you can get away with something like this.
let $phoneError = $('#phoneerror');
$('#phone1').mask("+55 (00) 0 0000-0000");
$('#phone1').on('input propertychange paste', function (e) {
var val = $(this).val();
if(val == "+5") {
$(this).val("+55 (5");
}
if(val == "+55 (0") {
$(this).val("+55 (");
$phoneError.text("don't start with zero");
}
});<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.mask/1.14.11/jquery.mask.min.js"></script>
<input pattern=".{20,}" id="phone1" name="phone1" placeholder="your phone" type="tel" />
<div id="phoneerror" style="color: #333; font-size: 14px; padding-top: 2px;"></div>