输入中文按下空格前不进行搜索

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入中文按下空格前不进行搜索</title>
</head>
<body>
    搜索:<input type="text">
</body>
<script>
    var inp = document.querySelector('input');
    // 是否正在合成
    let isComosite = false;
    // 搜索事件
    function search(){
        console.log('搜索内容:' + inp.value);
    }
    // 输入触发搜索事件
    inp.addEventListener('input',function(){
        if(!isComosite){ // 只有没有在合成的时候才触犯搜索
            console.log('input');
            search();
        }
    })
    // 合成开始事件
    inp.addEventListener('compositionstart',function(){
        console.log('start');
        isComosite = true; // 开始合成
    })
    // 合成结束事件
    inp.addEventListener('compositionend',function(){
        console.log('end');
        isComosite = false; // 合成结束
        search();
    })
</script>
</html>

 

posted @ 2022-10-25 11:07  onlywu  阅读(14)  评论(0编辑  收藏  举报