zoukankan      html  css  js  c++  java
  • JS 对输入判断变化屏蔽中文输入法连续输入时触发的事件

    //智能搜索提示
        IntelligenceSearch: function IntelligenceSearch() {
    
            $('#keyWord').on('input', function () {
                if ($(this).prop('comStart')) return;    // 中文输入过程中不截断
                var url = $('#hKeyWord').val();
                var data = { keyword: $('#keyWord').val() };
                $('#words').html('');
                imcis.ajax(url, data, false, function (data) {
                    var option = "";
                    $.each(data, function (key, value) {
                        option += '<option value=' + value + '>';
                    });
                    $('#words').html(option);
                    //alert('H');
                });
            }).on('compositionstart', function () {
                $(this).prop('comStart', true);
            }).on('compositionend', function () {
                $(this).prop('comStart', false);
            });
        }
    复制代码

    HTML以及加载方法:

    复制代码
    <input list="words" autocomplete="off" id="keyWord" style="font-size:12px;" type="text" placeholder="请输入关键字" />
                        <datalist id="words" style="background:red">
    
                            @*<option value="Internet Explorer">
                            <option value="Firefox">
                            <option value="Chrome">
                            <option value="Opera">
                            <option value="Safari">
                            <option value="Sogou">*@
                        </datalist>
    复制代码

    采用H5的datalist去提示

     $(function () {
                MedicalCase.IntelligenceSearch();
            });

    前台加载一下

    具体的原理如下:

    复制代码
          $(function () {
                    $('#text').on('input', function () {
                        if ($(this).prop('comStart')) return;    // 中文输入过程中不截断
    
                        var value = $(this).val();
                        console.log('当前输入:' + value);
                        //if (Str.byteLen(value, 3) > 24) {
                        //    $(this).val(Str.getMaxlen(value, 24));
                        //}
                    }).on('compositionstart', function () {
                        $(this).prop('comStart', true);
                        console.log('中文输入:开始');
                    }).on('compositionend', function () {
                        $(this).prop('comStart', false);
                        console.log('中文输入:结束');
                    });
                })
    复制代码

    开始和结束代表着事件的开始捕捉和结束捕捉

    ,这个做的更好一些能在后台加入缓存处理吗。还请大神指教

    积累小的知识,才能成就大的智慧
  • 相关阅读:
    dapper hepler帮助类
    别人在用你的什么技术在赚钱.其实你天天在做
    把asp.net mvc5 controller 单独放置在一个项目实例
    重写和动态创建 asp.net mvc 的控制器
    Linux 配置环境变量,环境变量优先级
    Redhat/ Centos/Ubuntu Linux sudo 权限配置,添加root权限
    Linux和window的文件传输 ( NFS篇 )
    安装R软件,R-3.5.3软件的下载、编译及安装
    yum 源
    瓜大无人船踩坑记3
  • 原文地址:https://www.cnblogs.com/ylldbk/p/5555622.html
Copyright © 2011-2022 走看看