Grepular

The current state of HTML email input fields is a bit of a mess when it comes to IDNs (Internationalised Domain Names). You would think it was as simple as:

<input type="email" value="person@ü.example.com">

You would be wrong though. Firefox is fine with the above, but Chrome says the contents of the field are invalid. Chrome will let you type “person@ü.example.com” into an email input field, but if you set it using HTML or JavaScript, it will say it is invalid. For Chrome you have to encode it using punycode first:

<input type="email" value="person@xn--tda.example.com">

That fixes things for Chrome, and Chrome still helpfully displays the unicode version “person@ü.example.com”, but now Firefox displays it as “person@xn--tda.example.com“. Which is not what I want.

To add further complication, if a user types “person@ü.example.com” into one of these fields, and you run the following bit of JavaScript:

const value = document.querySelector('input[type="email"]').value;

Firefox returns the version that was typed in, but Chrome returns the punycode encoded version - “person@xn--tda.example.com“

So who is right? Well, according to the HTML spec an email input field is valid if it matches:

/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

Which doesn’t include non-ascii characters. So it would seem like Chrome is doing the right thing as far as the HTML spec says. Firefox on the other hand seems to be doing what the spec should say. God knows how IE/Edge behave; probably in some entirely different manner.

So for now, to pre-fill a HTML email input field, or change one using JavaScript, a punycode library and feature detection is required:

const usePunycodeLibrary = (function(){
  const i = document.createElement('input');
  i.type  = 'email';
  i.value = "person@ü.example.com";
  return !i.validity.valid;
})();

So I should just use an input field of type “text” right? Well, then I lose the extra features that modern browsers provide when they know that an input field should contain an email address. Simple things like client side validation and the “@” symbol being more prominent on software keyboards.

Don’t you just love web development?