Teniendo en cuenta un campo de entrada de contraseña, quiero mostrar el último carácter de entrada durante milisegundos y luego volver a cambiar a la entrada de contraseña normal como esta:
var showLength = 1; var delay = 1000; var hideAll = setTimeout(function() {}, 0); $(document).ready(function() { $("#password").on("input", function() { var offset = $("#password").val().length - $("#hidden").val().length; if (offset > 0) $("#hidden").val($("#hidden").val() + $("#password").val().substring($("#hidden").val().length, $("#hidden").val().length + offset)); else if (offset < 0) $("#hidden").val($("#hidden").val().substring(0, $("#hidden").val().length + offset)); // Change the visible string if ($(this).val().length > showLength) $(this).val($(this).val().substring(0, $(this).val().length - showLength).replace(/./g, "•") + $(this).val().substring($(this).val().length - showLength, $(this).val().length)); // Set the timer clearTimeout(hideAll); hideAll = setTimeout(function() { $("#password").val($("#password").val().replace(/./g, "•")); }, delay); }); }); #hidden { opacity: 0.5; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="password" type="text" value="" /> <input id="hidden" type="text" value="" />El código anterior funciona bien, excepto por un problema molesto:
Si escribe 123456789 e intenta eliminar el primero o el segundo o cualquiera de los caracteres dentro del campo de entrada, verá que solo elimina el último carácter de la entrada oculta (que es el campo de entrada que queremos enviar sus datos al servidor)
Parece que de alguna manera deberíamos detectar la posición del cursor de tipo (que se puede mover con el mouse o las teclas de flecha del teclado) y eliminar ese carácter específico...
¿Cómo podemos solucionar este problema?
Nota: busqué Stack Overflow, y ninguno de los códigos o complementos de jQuery puede hacer esto correctamente. Me gustaría una solución de una vez por todas para esto.