I wrote a small code which removes whitespaces during input.

<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

It works fine on Desktop. But on mobile (Firefox latest version) I have some issues:

I'm typing "abcabc", double click on the spacebar inserts a dot (.) But because the whitespace was removed, the auto correction removes the last character of my string. Now the Input looks like this: "abcab.". Now I continue to put in abc and I click on the spacebar. The autocorrection kicks in (wants to convert abc to ABC). Now my string looks like this: "abcab.abABC" instead of "abcabc.abc".

Does anyone has a good idea, how to prevent the whitespace on input on mobile devices with auto correction?

My goal is, to prevent the whitespaces on email input. Because it is the only field I have, I don't want to use onblur Event. The Submit button stays deactivated as long as the email field is invalid.

Thank you and best Regards

Dimitri