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

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

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

    此外,中文输入法的keydown按出的keycode一直都会是229,在此科普一下

  • 相关阅读:
    [BZOJ4318] WJMZBMR打osu! / Easy (期望DP)
    构建之法阅读笔记05
    个人冲刺04
    构建之法阅读笔记04
    个人冲刺03
    个人冲刺02
    冲刺——第一天
    第八周学习进度条
    构建之法阅读笔记03
    第七周学习进度条
  • 原文地址:https://www.cnblogs.com/llcdbk/p/5553601.html
Copyright © 2011-2022 走看看