title: input element's maxLength attribute works weird in safari browser when inputting emoji(image character)
body: <p>This is a really simple code：</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
      &lt;html&gt;
        &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;&lt;/title&gt;
        &lt;/head&gt;
        &lt;body&gt;
          &lt;div&gt;if you input emoji(like:) into the input element below&lt;/div&gt;
          &lt;div&gt;you will be able to input only 4 emoji in chrome and firefox,the limited length is 8,it's ok&lt;/div&gt;
          &lt;div&gt;but when using safari,you can input 8 emoji,and got the length of 8,it's weird&lt;/div&gt;
          &lt;input id='input' maxlength="8"&gt;
          &lt;script&gt;
            document.getElementById('input'),addEventListener('input',function(e){
              console.log(e.target.value);
              console.log(e.target.value.length);
            })
          &lt;/script&gt;
        &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>the safari browser can input 8 emoji(with length 16),so I have to listen the input event and do substring especially in safari to ensure it works accord with firefox and chrome, is there any other way to achieve this?</p>