title: Different browsers allow different amounts of emoji characters in a maxlength field
body: <p>I'm trying to make an html input field that matches the database limit of 100 characters. I have a utf8mb4 database to support emoji, however the problem is the browser and database all count the length of emoji differently.</p>
  
  <p>The  emoji is the codepoint U+{1F600}.</p>
  
  <ul>
  <li>The db will count this codepoint <code>U+{1F600}</code> as 1 entry. So I could fit 100 in a db entry. </li>
  <li>maxlength in Safari computes the single codepoint, "" == 1. So I could enter the expected 100.</li>
  <li>maxlength in Chrome counts the surrogate pair <code>U+D83D, U+DE00</code> since the original codepoint is greater than 2 bytes, "" == 2. So I could only enter 50 in my form.</li>
  </ul>
  
  <p>Given that different browsers treat emoji with different lengths with respect to a form's maxlength attribute, what would be the cleanest way to accept a max of 100  emojis in a form across browsers?</p>