input输入框在输入中文时的compositionstart和compositionend事件

nput框在输入切换中文输入法时的输入事件
1、compositionstart
compositionstart事件只有在输入中文时才会触发,触发事件在input事件之前


如图,在输入中文时,先触发compositionstart事件,然后触发input事件打印输入的字符不是中文输入法则不会触发compositionstart事件

2、compositionend
compositionend表示结束中文输入时触发的事件,不管最后输入的是不是中文都会触发


如图可见compositionend事件是在input之后触发

3、input
input事件就是最后输入到输入框的事件
4、如何应用这些事件
利用这些事件,可以在输入中文的时候,保证在输入完毕之后才执行input事件的代码,不用每输入一个字符就执行一次input事件的代码了,如下图
如图,一次打一段话,只会触发一次input事件

下面是我的代码,做一下参考:

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>input功能</title>
        <script src="js/jquery-3.4.1.min.js"></script>
    </head>

    <body>
        <input id="ahri" type="text"/>
        <script>
            $(() => {
                let typing = false;
                //  输入中文之前
                $('#ahri').on('compositionstart',function(event) {
                    console.log('compositionstart');
                    typing = true;
                })
                //  输入中文之后
                $('#ahri').on('compositionend',function(event) {
                    console.log('compositionend');
                    typing = false;
                    input(event);
                })
                // 真正输入文字
                $('#ahri').on('input',input)
                function input(event) {
                    //    正在输入中文时就不执行后面的代码
                    if(typing) return;
                    console.log(event.target.value);
                }
            })
        </script>
    </body>

</html>

版权声明:本文为CSDN博主「昔别一展鲲鹏意」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/nosuchobjecterror/article/details/93193229

猜你喜欢

转载自www.cnblogs.com/chenzxl/p/12785036.html
今日推荐