zoukankan      html  css  js  c++  java
  • input 事件与汉字输入法:使用compositionend事件解决

    input 事件与汉字输入法:使用compositionend事件解决

    在使用<input type="text">的input事件的时候 会遇到中文输入法的“bug”,比如:

    依次输入“喜茶”触发的事件中 data的值很诡异,只有当最终点击了空格之后 才是我们期望的值。这种情况下就需要借助 compositonstart compositonend 这两个事件。

    按下的按键 出现的结果
    x 1、2
    i 3
    c 4
    h 5
    a 6
    空格 7、8

    code:

    <input type="text" class="input">
    
    function checkLength(val) {
        return val.length > 3;
    }
    
    let input = document.querySelector('input');
    input.addEventListener('input', function (event) {
        console.log('input', checkLength(event.target.value), event);
    });
    input.addEventListener('compositionstart', function (event) {
        console.log('compositionstart', checkLength(event.target.value), event);
    });
    input.addEventListener('compositionend', function (event) {
        console.log('compositionend', checkLength(event.target.value), event);
    });
    

    逻辑为:验证输入框中输入的字符数是否 >3 个,可以看到虽然汉字“喜茶”没有超过,但是在输入汉字的过程中是不符合条件的。那么我们要做的是在输入汉字的过程中不触发input,而在按空格键的时候才做校验。

    还要注意到上图中input事件总是先于compositionend,如果要在input事件中做一些操作,那么在 compositionend中也要重复调用一下。

    function checkLength(val) {
        return val.length > 3;
    }
    let inputLock = false;
    let input = document.querySelector('input');
    input.addEventListener('input', function (event) {
        if (inputLock) {
            return;
        }
        // 在输入汉字的情况下这一句不会执行,因为input事件总是先于compositionend
        console.log('input', checkLength(event.target.value), event);
        // doSomething();
    });
    input.addEventListener('compositionstart', function (event) {
        inputLock = true;
        console.log('compositionstart', checkLength(event.target.value), event);
    });
    input.addEventListener('compositionend', function (event) {
        inputLock = false;
        console.log('compositionend', checkLength(event.target.value), event);
        // doSomething(); // 如果要在input事件中做一些操作,那么在 compositionend中也要重复调用一下
    });
    

    reference
    element fe

  • 相关阅读:
    hashmap的一些基础原理
    关于uuid
    读锁跟写锁的区别
    栈为什么效率比堆高
    MySQL行级锁、表级锁、页级锁详细介绍
    MYSQL MyISAM与InnoDB对比
    MYSQL锁表问题解决
    mysql查询锁表语句
    三种排序方法
    正则表达式
  • 原文地址:https://www.cnblogs.com/snail222/p/7647715.html
Copyright © 2011-2022 走看看