zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    移动端开发常见的坑
    javascript的原始类型(primitive type)之间的关系。
    微信小程序学习:开发注意点
    canvas学习(一):线条,图像变换和状态保存
    css模仿微信弹出菜单
    html5 canvas绘制环形进度条,环形渐变色仪表图
    vue学习笔记(三):vue-cli脚手架搭建
    nodejs基础学习
    css3美化radio样式
    基于angular+bower+glup的webapp
  • 原文地址:https://www.cnblogs.com/chenzxl/p/12785036.html
Copyright © 2011-2022 走看看