Listen for change events before you finish typing the input box

clipboard.png

for example: listen for the change event of the input box, and then I want to trigger the change event after the input is completed.
how to deal with this

Mar.05,2021

previous blog on this issue.
https://lonhon.top/2017/10/09.


This is used in

projects. The essence of
is to listen for a series of composition events.
composition series event documentation

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

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

  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>

you see the function jitter


this is really difficult to control, or listen to press the space, enter English you will not be able to monitor


onblur can meet your requirements?


are you binding a change event? Is the change event triggered at the time of blur?
for this type of input that needs to be spelled, there is an event to try compositionend . I don't know about compatibility.


if you can determine the type of final input, try to add a judgment to each function triggered by change, such as using regularity to determine whether it is a few Chinese characters, but the estimation efficiency is relatively low.

regular judgment of Chinese characters: from=1019023i&wd=%E6%AD%A3%E5%88%99%E5%88%A4%E6%96%AD%E6%B1%89%E5%AD%90" rel=" nofollow noreferrer "> https://m.baidu.com/s?from=10.


as said upstairs, take a look at anti-shaking and throttling. http://www.icrazyman.cn/2018/.
is introduced in this article, you can take a look at

Menu