中英文统计数字

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- <button>点击</button> -->
    <input type="text" />
    <span></span>
    <script>
      const input = document.querySelector('input')

      let isChinese = false
      input.addEventListener('compositionstart', function (ev) {
        // 该事件类型与 input 类似的，都是在用户进行输入时被触发
        // 区别在于 该事件在针对中文输入时，只有文字确定后才会触发
        // console.log("文字输入了");
        // 该事件只有在输入中文时才会触发
        console.log('你正在输入的中文...')
        isChinese = true
      })

      input.addEventListener('compositionend', function (ev) {
        // 该事件类型与 input 类似的，都是在用户进行输入时被触发
        // 区别在于 该事件在针对中文输入时，只有文字确定后才会触发
        // console.log("文字输入了");
        // 该事件只有在输入中文时才会触发
        console.log('你正在输入的中文输入结束了...')
        document.querySelector('span').innerHTML = this.value.length
        isChinese = false
      })

      input.addEventListener('input', function () {
        if (isChinese) return
        document.querySelector('span').innerHTML = this.value.length
      })
    </script>
  </body>
</html>