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

JesseLuo
  • 1.7k

clipboard.png

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

回复
阅读 1.1k
8 个回答

项目中这样使用。
其本质还是监听 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>

你看下函数抖动

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

onblur能满足你的要求么?

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

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

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

你知道吗?

宣传栏