Recently I was learning how others use Vue to build wheels, so I chose Element UI in Vue’s UI framework. There’s this code in el-Input

 handleInput(event) { // The input event is not triggered if the IME event is synthesized
  // should not emit input during composition
  // see: https://github.com/ElemeFE/element/issues/10516
  if (this.isComposing) return

  // hack for https://github.com/ElemeFE/element/issues/8548
  // should remove the following line when we don't support IE
  if (event.target.value === this.nativeInputValue) return

  this.$emit('input', event.target.value)

  // ensure native input value is controlled
  // see: https://github.com/ElemeFE/element/issues/12850
  this.$nextTick(this.setNativeInputValue)
},
Copy the code

In composing an input box, Element is performing a judgment call to determine if this.isComposing is true. That is, the input event is not passed up every time it is fired. I was a little confused when I first saw it. Look closely at the above comment should not emit input during composition. Input events should not be triggered when composition is triggered.

What is the composition

I might have seen Composition before, but it wasn’t that impressive.

Composition Events are a new class of DOM level 3 events that are used to process input sequences for IMes. The IME (Input Method Editor) allows the user to type characters that cannot be found on the physical keyboard. Compound events are designed to detect and process such inputs. For example, when typing Chinese characters, composition Event is used instead of selecting each character directly through the keyboard

composition eventContains three events

  1. Compositonstart is triggered when the text composition system of the IME is opened. That is, when the input pinyin triggered
  2. Compositionupdate fires when a new character is inserted, just as the input event fires before the input event
  3. Compositionend input is complete, that is, after selecting the text to really enter the input box

Take a look at the code below

<body>
  <input type="text" name="" id="ipt">
  <script>
    const input = document.querySelector('#ipt')
    input.addEventListener('input'.function(e){
      console.log('Input event trigger',e.target.value)
    })
    input.addEventListener('compositionstart'.function(){
      console.log('componsitionstart trigger')
    })
    input.addEventListener('compositionupdate'.function(){
      console.log('compositionupdate trigger')
    })
    input.addEventListener('compositionend'.function(){
      console.log('compositionend trigger')})</script>
</body>
Copy the code

Componsitionstart is executed once, comPOSItionUpdate and Input events are executed six times (5 characters and the last selected text), and a ComPOSItionEnd event is triggered.

Componsitionstart Generates ComPOSItionUpdate generates input events generates N ComPOSItionUpdate generates input events generates NI ComPOSItionUpdate generates input events generates NI H Compositionupdate Trigger Input event Trigger NI HA COMPOSItionUpdate trigger input event trigger NI Hao COMPOSItionUpdate trigger Input event Trigger Hello Compositionend triggerCopy the code

El – used in the input

I happened to see this article of ele. me front end team when I was looking up information. Mobile Web development trappings tour. There are compositionStart and CompositionEnd events introduced to input. . The input events described above are used in the same way that the Element UI is used. Sets a switch to determine whether the current event is a compound event. You can continue to see this article by Ele. me on a tour of mobile Web development pits.

Reflect on the execution timing of each of the above events, since comPositionEnd was executed after the last input event. $emit(‘input’, event.target.value) will not be emitted from this.$emit(‘input’, event.target. Because the last time an input event was triggered, the switch isComposing was true. So the comPositionEnd event is also listened for at el-Input.

handleCompositionEnd(event) { // Set the switch to false and trigger the input event after IME composition
  if (this.isComposing) {
    this.isComposing = false
    this.handleInput(event)
  }
},
Copy the code

In addition to the use of Element UI, many scenarios can be thought of at this time. For example, in the search input box, the combination with composition Event prevents the user from triggering the execution of search events all the time when entering Chinese pinyin.