input事件输入中文再进行搜索的问题

最新推荐文章于 2024-04-01 00:49:54 发布

你是谁-

最新推荐文章于 2024-04-01 00:49:54 发布

阅读量1.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/u013379933/article/details/79226473

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何通过compositionstart和compositionend事件来正确处理输入框中的输入事件，特别是在涉及中文输入时，确保逻辑处理的准确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

触发compositionstart时，文本框会填入 “虚拟文本”（待确认文本），同时触发input事件；在触发compositionend时，就是填入实际内容后（已确认文本）。

var cpLock = true;
$('.com_search_input').on('compositionstart', function () {
        cpLock = false;
//      console.log("compositionstart")
    });
    $('.com_search_input').on('compositionend', function () {
        cpLock = true;
//      console.log("compositionend")
    });
$(".com_search_input").on("input",function(e){
e.preventDefault();
var _this = this;
// console.log("input");
setTimeout(function(){
if (cpLock) {
//开始写逻辑
  console.log("逻辑")
}
},0)
})

为什么使用延时器？
　　因为选词结束的时候input会比compositionend先一步触发，此时cpLock还未调整为true，所以不能触发到console.log("逻辑")，故用setTimeout将其优先级滞后。