compositionstart,compositionend,input实时输入问题_js input oncompositionstart

input 搜索会造成什么现象

dom.on("input",function(){
      searchTrigger($(this));
});
function searchTrigger(self){
      //此处处理搜索事件
}
1
2
3
4
5
6

• 单独使用input搜索，安卓端没问题，在ios中文状态下会输入英文

input，compositionstart,compositionend 一起使用

 let flag=true;
 dom.on({
        compositionstart: function () {
            flag = true;
        },
        compositionend: function () {
            flag = false;
        },
        input: function (e) {
            let self = $(this);
            setTimeout(function () {
                if (!flag) {
                    searchTrigger(self);
                }
            },0);
        });
       function searchTrigger(self){
          //此处处理搜索事件
       }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

• 此种情况既解决了中文输入的问题，有解决ios在ios中文状态下会输入英文的问题
• 因为compositionend会在input之后触发，所以用定时器去延迟input触发
• 但是此种方法在安卓端搜索会发生以下问题
  • 无法达到实时触发，
  • 不生效

取消定时器，改用compositionend，input同时触发searchTrigger事件，用flag判断是否进行触发

 let flag = false;
 dom.on({
        compositionstart: function () {
            flag = true;
        },
        compositionend: function () {
            flag = false;
            searchTrigger($(this));
        },
        input: function (e) {
            searchTrigger($(this));
        },
        keypress: function (e) {
            let self = $(this);
            if (e.keyCode == 13) {
                flag=false;
                searchTrigger(self);
            }
        }
    });
    function searchTrigger(self){
          if(!flag){
             //此处处理搜索事件
          }
     }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

附赠一个本人封装的实时搜索插件

(function ($) {
    $.fn.SearcherTrigger = function (opts) {
        searchFun($(this), opts);
    }
    function searchFun(searchDOM, opts) {
	     var defalutOpts = {
	        emptySpace: true,//清空空格
	        delay: true, //是否延时触发搜索
	        delayTime: 500 //延时触发时间
	    }
        opts = opts || {};
        opts = $.extend(defalutOpts, opts);
        opts.searchLock = true; //搜索锁
        opts.temporaryStorage = ""; //临时存储空间
        (function searchBindEvent() {
            searchDOM.on('compositionstart', function () {
                opts.searchLock = false;
            });
            searchDOM.on('compositionend', function () {
                opts.searchLock = true;
                searchTrigger();
            });
            searchDOM.on("input", function (e) {
                e.preventDefault();
                searchTrigger();
            });
        })();
        function searchTrigger() {
            if (!opts.searchLock) return;
            emptySpaceFun();
            let searchStoragel = searchDOM.val();
            if (!(searchStoragel.length > 1 && opts.temporaryStorage !== searchStoragel)) {
                opts.error && opts.error();
                return;
            } 
            opts.temporaryStorage = searchStoragel;
            delayTrigger();
        }
        function emptySpaceFun() {
            if (!opts.emptySpace) return;
            searchDOM.val(searchDOM.val().replace(/[ ]/g, ""));
        }
        function delayTrigger() {
        	opts.delay ? setTimeout(function () {
                resultTrigger();
            }, opts.delayTime) : resultTrigger();
            function resultTrigger() {
                opts.sucess && opts.sucess(opts.temporaryStorage);
            }
        }
    }
  
})(jQuery);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

调用方式

$("#input").SearcherTrigger({
      sucess:function(value){
      },
      error:function(){
      }
})
1
2
3
4
5
6

关于插件,要是有的好的想法,可以留言给我.谢谢.