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

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

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

    积累小的知识,才能成就大的智慧
  • 相关阅读:
    微服务架构中的熔断 VS 股票市场中的熔断
    通过异常处理错误
    Java之GC 如何工作
    HBase学习笔记
    日志打印的正确姿势
    告别if/else连环写法
    下载resource下的excel文件
    get请求和post请求参数中文乱码的解决办法
    jquery基础
    45度炸队Alpha冲刺博客集
  • 原文地址:https://www.cnblogs.com/ylldbk/p/5555622.html
Copyright © 2011-2022 走看看