Escribí un pequeño código que elimina los espacios en blanco durante la entrada.

 <input id="my_input">

 window.my_input.addEventListener('input', (event) => { const cursorPosition = event.target.selectionEnd; const modifiedInput = event.target.value.replace(/\s+/g, ''); if(modifiedInput !== event.target.value) { event.target.value = modifiedInput; event.target.selectionEnd = cursorPosition - 1; } });

https://codepen.io/justpilot/pen/bGYMEqr

Funciona bien en el escritorio. Pero en el móvil (última versión de Firefox) tengo algunos problemas:

Estoy escribiendo "abcabc" , haga doble clic en la barra espaciadora para insertar un punto (.) Pero debido a que se eliminó el espacio en blanco, la corrección automática elimina el último carácter de mi cadena. Ahora la entrada se ve así: "abcab". . Ahora sigo poniendo abc y hago clic en la barra espaciadora. La autocorrección se activa (quiere convertir abc a ABC). Ahora mi cadena se ve así: "abcab.abABC" en lugar de "abcabc.abc" .

¿Alguien tiene una buena idea sobre cómo evitar los espacios en blanco en la entrada en dispositivos móviles con corrección automática?

Mi objetivo es evitar los espacios en blanco en la entrada de correo electrónico. Debido a que es el único campo que tengo, no quiero usar onblur Event. El botón Enviar permanece desactivado mientras el campo de correo electrónico no sea válido.

Gracias y un saludo

dimitri