输入框没输完就监听change事件

Question

比如: 监听了输入框的change事件, 然后我想等输入完成再触发change事件
这个要怎么处理才好

Answer 1

之前写的关于这个问题的博客。
https://lonhon.top/2017/10/09...

Answer 2

项目中这样使用。
其本质还是监听 composition 系列事件。
composition 系列事件文档

<input id="input" type="text" />

<script>
  let input = document.querySelector('#input');

  packageInputEvent(input, callback);

  function callback() {
    console.log('callback');
  }
  function packageInputEvent(input, callback) {
    let useCompositionEvent = false;

    input.addEventListener('input', function(e) {
      !useCompositionEvent && callback.call(this, e);
    });
    input.addEventListener('compositionstart', function() {
      useCompositionEvent = true;
    });
    input.addEventListener('compositionend', function(e) {
      useCompositionEvent = false;
      callback.call(this, e);
    });
  }
</script>

Answer 3

你看下函数抖动

Answer 4

这个还真不好控制，要么监听到按了空格吧，输入英文你就监听不到了

Answer 5

onblur能满足你的要求么？

Answer 6

你绑定是是change事件吗？change事件是在blur时才触发的？
对于这种需要拼写的输入有一个事件可以试试compositionend，兼容性不知道咋样。

Answer 7

如果能确定最终输入内容是什么类型的话试试在每次change触发的函数里加个判断，比如用正则判断一下是不是几个汉字之类的，但估计效率比较低。

正则判断汉字：https://m.baidu.com/s?from=10...

Answer 8

如楼上所说，看下防抖和节流。http://www.icrazyman.cn/2018/...
这篇文章里有介绍，可以看看