码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-06-03 11:19:31      阅读:2040      评论:0      收藏:0      [点我收藏+]

标签:

//智能搜索提示
    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 对输入判断变化屏蔽中文输入法连续输入时触发的事件

标签:

原文地址:http://www.cnblogs.com/ylldbk/p/5555622.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!