title: Maxlength of HTML input with UTF8 supplementary characters
body: <p>I would like to enable my users an option to enter EMoji characters in an input field. I assume that in 2019 this should be as trivial as setting the meta charset of the website to UTF-8. However when tested in Chrome or Firefox the below example counts supplementary UTF-8 characters (with length 4 bytes) differently.<br>
  In the first input I can only enter 2 more characters after the poop. In the second input I can still enter 3 more characters after <code>‰</code> which is 3 bytes long.</p>
  
  <p>What is causing this inconsistent behaviour? Is there another HTML meta setting for 4 byte characters? It worked fine in Edge 17. Even trash IE 11 counts the length correctly.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" value="" maxlength="4" /&gt;
  &lt;input type="text" value="‰" maxlength="4" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My Test cases:
  <a href="http://jsfiddle.net/L726ryea/7/" rel="nofollow noreferrer">http://jsfiddle.net/L726ryea/7/</a></p>