JS 对输入判断变化屏蔽中文输入法连续输入时触发的事件

Posted 加德满都的风铃

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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(\'中文输入:结束\');
                });
            })
复制代码

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

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

积累小的知识,才能成就大的智慧

以上是关于JS 对输入判断变化屏蔽中文输入法连续输入时触发的事件的主要内容,如果未能解决你的问题,请参考以下文章

Angular2 InputFormControl 和 ValueChange 连续触发

js scroll 滚动连续多次触发事件怎么只执行一次

当用js动态的改变一个输入框中的值后,并不能触发它的onchange事件why?

对输入值进行编程更改时触发操作

Javascript,input文本框内容改变时自动触发事件,不是keyup或者onchange,需要可以解决中文输入的问题

js scroll 滚动连续多次触发事件怎么只执行一次?