美文网首页前端
compositionstart compositionupda

compositionstart compositionupda

作者: 若年 | 来源:发表于2021-04-25 15:37 被阅读0次

    在elmentUI el-input源码中有这样一段代码

      <input
            :tabindex="tabindex"
            v-if="type !== 'textarea'"
            class="el-input__inner"
            v-bind="$attrs"
            :type="showPassword ? (passwordVisible ? 'text': 'password') : type"
            :disabled="inputDisabled"
            :readonly="readonly"
            :autocomplete="autoComplete || autocomplete"
            ref="input"
            @compositionstart="handleCompositionStart"
            @compositionupdate="handleCompositionUpdate"
            @compositionend="handleCompositionEnd"
            @input="handleInput"
            @focus="handleFocus"
            @blur="handleBlur"
            @change="handleChange"
            :aria-label="label"
          >
    
     @compositionstart="handleCompositionStart"
     @compositionupdate="handleCompositionUpdate"
     @compositionend="handleCompositionEnd"
    

    其中这三个事件是干什么用的呢?
    官方定义如下compositionstart 事件触发于一段文字的输入之前(类似于 keydown 事件,但是该事件仅在若干可见字符的输入之前,而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词)
    简单来说就是切换中文输入法时在打拼音时(此时input内还没有填入真正的内容),会首先触发compositionstart,然后每打一个拼音字母,触发compositionupdate,最后将输入好的中文填入input中时触发compositionend。


    image.png

    值得注意的是,只有在输入中文的时候才有这3个事件,输入英文和数字时都不会触发。

    相关文章

      网友评论

        本文标题:compositionstart compositionupda

        本文链接:https://www.haomeiwen.com/subject/sobdrltx.html