中文输入法下的input、compositionstart与compositionend

实现中文输入法下,仅在选词后触发input事件。

描述

在使用oninput监控输入框内容变化时,我们期望仅在value值变化时,才触发oninput事件,而在中文输入下,未选词时的按键也会触发oninput事件。
input事件触发效果

关键

  • compositionstart事件
  • compositionend事件

方法

使用一个变量表示拼写状态,在oninput事件中判断是否在拼写状态,当拼写状态结束,继续执行下一步操作。

var typing = false;
$('#ipt').on('compositionstart',function(){
    typing = true;
})
$('#ipt').on('compositionend',function(){
    typing = false;
})
//oninput在oncompositionend之前执行,需加定时器
$('#ipt').on('input',function(){
    setTimeout(function() {
        if(!typing) {
            //To do something...
        }
    },0);
})

//或用keyup代替input
$('#ipt').on('input',function(){
    if(!typing) {
        //To do something...
    }
})

效果

效果图

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,538评论 1 11
  • 睡觉 被子 枕头 被单 垫被 个人 洗面奶 牙刷 充电器 牙膏 洗发水 免洗喷雾 身体乳 面霜 吹风机 梳子 睫毛...
    dadadahui阅读 397评论 0 0
  • 周围寂静安逸, 聆听着自己的呼吸。 在夜的歌声中, 发出均匀的喘息声。 窗外的狗叫声, 划过了夜的长空。 天色,越...
    青竹风吟阅读 394评论 0 0
  • 戏里大女主戏外小女人,孙俪世界里不只有孩子和瑜伽还有书法 文│李东升 心似浮云无所寄,事如春梦了无痕。 当我们为尘...
    文行天下简书专栏阅读 593评论 0 0