解决input时，中文及拼音问题

compositionstart：compositionstart事件触发于一段文字的输入之前（类似于 keydown 事件，但是该事件仅在若干可见字符的输入之前，而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）。
compositionend：当文本段落的组成完成或取消时, compositionend 事件将被触发。

通俗点说：

是属于输入法和语音等键盘操作事件。

注意事项：

compositionend事件在input事件之后触发。

解决方案：

记录输入状态，默认通过input事件进行内容过滤，当为拼音输入时input事件跳过，等end事件进行内容过滤操作。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <div>
    <input type="text" id="addressName">
  </div>
</body>

</html>
<script>
  // 
  let flagCC = false
  let addressNameID = document.getElementById('addressName')
  addressNameID.addEventListener('compositionstart',function(){
      flagCC = true;
  })
  addressNameID.addEventListener('compositionend',function(val){
      flagCC = false;
      console.log(val.target.value);
  })
  addressNameID.addEventListener('input',function(val){
      if(flagCC){return}  
      console.log(val.target.value.length);
  })
</script>

参考

https://www.cnblogs.com/lstrive/p/11897106.html

https://www.bbsmax.com/A/q4zVDNp25K/