Estoy usando un complemento jQuery para crear una máscara de entrada con un código de país predefinido que comienza en +55.
Funciona con todos los números, excepto con el número 5. Ese es el problema.
Cuando el primer número escrito es 5, la salida debe ser: +55 (5
Pero no es así.
¿Puedo usar keydown o keypress para arreglar esto? No se como hacer esto.
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>Parece haber un problema con esa mask lib cuando se inicia la máscara con números codificados, es decir, +55 (00)... y luego se ingresa el primer dígito como 5, por alguna razón no activa la máscara. Pero puedes salirte con la tuya con algo como esto.
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>