Estoy tratando de formatear y permitir editar la cadena formateada en la entrada con jquery, pero no puedo lograr editar la cadena formateada correctamente. En realidad, cuando el usuario comete un error al escribir el código en la entrada y quiere corregirlo, salta al usuario al final de la cadena, porque lo forzó a formatearse cuando el usuario eliminó un carácter. ¿Cómo puedo editarlo para permitir que el usuario corrija su error pero aún así formatear la cadena?
Qué tipo de usuario: 8F489T4R8T5O7S8E
Lo que ve el usuario: 8F48-9T4R-8T5O-7S8E
Pero cuando el usuario desea corregir O a 0, genera un resultado como este 8F48-9T4R-8T57-S8E0, porque obligará a reformatear la cadena de inmediato y colocará el 0 al final de la cadena.
$("input[name=login-access-token]").keyup(function(event){ var input = $(this).val(); input = input.replace(/[\W\s\._\-]+/g, ''); var split = 4; var chunk = []; for (var i = 0, len = input.length; i < len; i += split) { split = 4; chunk.push( input.substr( i, split ) ); } $(this).val(function() { var out = chunk.join("-").toUpperCase(); if(out.length == 4 && event.keyCode != 8){ out += "-"; } if(out.length == 9 && event.keyCode != 8 ){ out += "-"; } return out; }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <input type="text" name="login-access-token" placeholder="Code" />Se agregó una nueva condición if.
$("input[name=login-access-token]").keyup(function(event){ if (event.keyCode != 8 && event.keyCode != 46) { //New conditions added var input = $(this).val(); input = input.replace(/[\W\s\._\-]+/g, ''); var split = 4; var chunk = []; for (var i = 0, len = input.length; i < len; i += split) { split = 4; chunk.push( input.substr( i, split ) ); } $(this).val(function() { var out = chunk.join("-").toUpperCase(); if(out.length == 4 && event.keyCode != 8){ out += "-"; } if(out.length == 9 && event.keyCode != 8 ){ out += "-"; } return out; }); } });Creo que este es un buen caso de uso para el complemento jquery-inputmask .
Eche un vistazo a la documentación, hay muchas opciones.
Si lo combina con la propiedad CSStext-transform: uppercase , obtiene la mayor parte del comportamiento deseado en un javascript de una sola línea (más copiar/pegar viable y deshabilitar los caracteres no alfabéticos).
$("input[name=login-access-token]").inputmask() input { font-family: monospace; text-transform: uppercase } <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js"></script> <input type="text" name="login-access-token" placeholder="Code" data-inputmask="'mask': '****-****-****-****'"/>