其他分享
首页 > 其他分享> > 输入框输入中文显示字数问题解决

输入框输入中文显示字数问题解决

作者：互联网

问题：输入中文时 如xin 新 会显示字数：1 2 3 1 这不是我们想要的  在输入xin 新 时 应该是 1 不能把 xin 计算进去

 

 

 

<!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>

 

  <!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>
   

标签：isChinese,触发,中文,log,输入框,字数,input,输入
来源： https://www.cnblogs.com/zhulongxu/p/16490023.html