How can I read the original value of an input field with type email without the Umlaut conversion?

Question

I have a html input element on my page in which the user can enter his e-mail address:

<input type="email" id="yourEmail" name="yourEmail">

I do not send this field via the form directly but read it into a variable with javascript like this:

let email = document.getElementById('yourEmail').value.trim();

Now that works fine for normal e-mails, but as soon as I have special chars like German Umlauts, I get the transcribed email in the javascript variable. If I enter mail@gründlicher.de for example, the js variable contains the value [email protected]. Since I want to show this data on a summary page back to the user before I sent it, that is really confusing to the user - it feels like something is broke (at least if you are not a techn nerd, understanding what happens).

Now I'm wondering: How do I get the text, that was actually entered by the user instead of the transcribed email? Obviously I could change form type="email" to type="text", but then I will also loose the e-mail specific keyboard on mobile devices, which I would like to have.

Answer 1

Try using type="text" to get the special characters to display, then use inputmode="email" to allow for e-mail-specific keyboard on mobile devices:

document.getElementById('yourEmail').addEventListener('change', function() {
  console.log(this.value);
});

<input type="text" inputmode="email" id="yourEmail" name="yourEmail">