Tengo una entrada HTML. Cuando un usuario lo escribe, configuré el evento 'input' para manejar la actualización de la entrada a una versión filtrada de lo que el usuario escribió (así como la actualización de selectionStart y selectionEnd para una experiencia de usuario fluida). Esto sucede constantemente con el fin de dar el efecto adecuado.
Lo que noté, sin embargo, es que cada vez que JS establece el valor de una entrada a través de input.value = '...'; , parece que desaparece el historial de deshacer de la entrada. Es decir, presionar Ctrl-Z con el foco ya no retrocede al estado anterior.
¿Hay alguna forma de proporcionar el historial de deshacer personalizado de entrada o de evitar que pierda el historial mientras cambia su valor?
Aquí hay un ejemplo mínimo de mi problema:
Después de escribir la entrada superior (que rudimentariamente agrega puntos entre cada carácter), Ctrl-Z no se deshace.
<body> <input type="text" id="textbox" placeholder="No undo"/><br/> <input type="text" id="textbox2" placeholder="Undo"/> <script> var tbx = document.getElementById("textbox"); tbx.addEventListener('input', () => { tbx.value = tbx.value + '.' }); </script> </body>Puede intentar almacenar el valor anterior de la entrada en una variable, luego escuchar la combinación de teclas Ctrl + Z en un detector de eventos keydown adjunto a la entrada. Cuando se dispara, puede establecer el valor de la entrada en el valor almacenado anterior.
btn.addEventListener('click', function(){ savePrevInput(input.value) input.value = "Hello World!"; }) var prevInput; function savePrevInput(input){ prevInput = input; } input.addEventListener("keydown", function(e){ if(e.ctrlKey && e.keyCode == 90){ input.value = prevInput; input.selectionStart = prevInput.length; } }) <input id="input"/> <button id="btn">Change</button>