百城学院
活到老 学到老

jQuery实现input输入中文完成时才触发指定事件,输入英文时直接触发

经验总结 xiangbaicheng 2019-08-01 969 1

有的时候我们需要在对input输入框进行绑定事件,如keyup。并且当输入中文未完成时不触发该事件,输入完成时才触发keyup事件;输入其他字符时又可以直接触发。具体实现思路如下:

1、给定一个标识,默认值为true;

2、给input绑定compositionstart事件,这个事件只有在输入中文时才会触发,触发后将flag置为false;

3、给input绑定compositionend事件,这个时间也只有在输入中文时才会触发,触发后将flag置为true;

4、绑定指定事件(这里假设绑定事件为keyup),判断flag是否为true,为true时才继续执行。

// 初始flag为true,用于非中文字符的输入
var flag = true;

// 绑定compositionstart事件
$('#input').on('compositionstart', function (){
    flag = false;
});

// 绑定compositionend事件
$('#input').on('compositionend', function (){
    flag = true;
});

// 绑定指定事件
$('#input').on('keyup', function (){
    // 这里为了防止事件 的先后顺序出错,给一个延时
    setTimeout(function (){
        flag && function (){
            // 其他业务逻辑代码
        }();
    });
})


文章分类: 前端开发 JavaScript
文章来源: 百城学院
上一篇:Git常用命令及方法大全 下一篇:Python配置虚拟环境
xiangbaicheng
文章
130
访问
5
粉丝
2
点赞
22
文章分类