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('中文输入:结束');
                    });
                })
    复制代码

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

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

    积累小的知识,才能成就大的智慧
  • 相关阅读:
    vue-fullcalendar插件
    iframe 父框架调用子框架的函数
    关于调试的一点感想
    hdfs 删除和新增节点
    hadoop yarn 实战错误汇总
    Ganglia 安装 No package 'ck' found
    storm on yarn(CDH5) 部署笔记
    spark on yarn 安装笔记
    storm on yarn安装时 提交到yarn失败 failed
    yarn storm spark
  • 原文地址:https://www.cnblogs.com/ylldbk/p/5555622.html
Copyright © 2011-2022 走看看