H5页面如何应对中文输入法

3c07008a38af8469.jpg

类似限制输入长度这种需求。
通常、我们会添加监听:

<script >
var textInput = document.querySelector('#text_input');
textInput.addEventListener('input', function(){
     if(this.value.length>=10){
         this.value=this.value.substring(0,10) 
     }
});
</script>

这段代码在英文、数字、符号输入等情况下是没有问题的。
但是在中文情况下：

web

144e08c0-e957-42ae-8878-c6d87be192f7.gif

app

d155b124-a639-4c39-825a-0953298288a5.gif

也就是表示在用户进行非直接输入的时候、监听事件也对用户行为进行了处理、这不是我们想要的。
所以、我们需要用到两个事件compositionstart 和 compositionend。

<script >
  var textInput = document.querySelector('#text_input');
  var inputLock = false;
  textInput.addEventListener('compositionstart', function(){
      inputLock = true;
  })
  textInput.addEventListener('compositionend', function(){
      inputLock = false;
  })
  textInput.addEventListener('input', function(){
      if(! inputLock){
          if(this.value.length>=10){
              this.value=this.value.substring(0,10) 
          }
      };
  });
</script>

compositionstart事件在用户开始进行非直接输入的时候触发。
compositionend事件则在用户进行直接输入的时候触发。
通过一个开关inputLock。在用户进行非直接输入时不进行处理、改为直接输入时再进行处理。

web

2a71ba3d-e235-46c3-a954-77c22a9a6c3b.gif

app

0d8c4353-fb61-4c40-a8e7-cc28d38155a9.gif

有些浏览器或者手机版本下。input监听和compositionend调用的顺序可能会有先后。需要特殊注意。