移动端h5页面，jquery输入框实时输入相关问题

//手机键盘隐藏
$('body').on('touchend', function(el) {
     if (el.target.tagName != 'INPUT') {
         $searchInput.blur();
     }
 });

var flag = false;
$searchInput.on({
    'compositionstart': function() {
        flag = true;
    },
    'compositionend': function() {
        flag = false;
    },
    'input propertychange': function() {
        if (!flag) {
            valUpdate(this);
        };
    }
});


function valUpdate(that) {
    if ($(that).val() !== '') {
        // 只能输入中文、数字、字母
        var val = $(that).val().replace(/[^\u4E00-\u9FA5\uF900-\uFA2DA-Za-z0-9']/g, '');
        if (val !== '') {
            $iptClear.css('display', 'inline-block');
        } else {
            $iptClear.css('display', 'none');
        }
        $(that).val(val);
        return;
    }

    $iptClear.css('display', 'none');
    showSearchbox(false);
}

$searchInput.InputEventClearPre({
  MaxLength: '10', //输入框能输入的最大长度，默认不限制，填写则限制
   callback: function($self, valLength, index) {
       //$self 代表绑定对象本身;
       //valLength 是输入框的字符总长度/如果要限制输入数字等，不要用valLength，建议用$self.val().length;
       // index 是绑定对象的下标， 对象集时多用
       valUpdate($self);
   }
});

//  解决系统下键盘预输入的时候会有问题
$.fn.InputEventClearPre = function(options) {
    var defaults = {
        MaxLength: '', //输入框能输入的最大长度，默认不限制，填写则限制
        callback: function($self, valLength, index) {
            //$self代表绑定对象本身;
            //valLength是输入框的字符总长度
            //index是绑定元素的下标，对象集的时候多用；
        }
    };
    var opts = $.extend({}, defaults, options || {});
    var renderclass = {
        render: "inputRender"
    };
    var cpLock = [];
    return this.each(function(i) {
        cpLock[i] = false;
        var $self = $(this);

        $self.addClass(renderclass.render);
        $self.on('compositionstart', function() {
            cpLock[i] = true;
        });
        $self.on('compositionend', function() {
            cpLock[i] = false;
            var self = $(this);
            if (!cpLock[i]) {
                if (opts.MaxLength) {
                    if (self.val().length > (opts.MaxLength - 0)) {
                        self.val(self.val().substring(0, opts.MaxLength - 0));
                        if (typeof opts.callback == 'function') {
                            opts.callback(self, self.val().length, i);
                        }
                    } else {
                        if (typeof opts.callback == 'function') {
                            opts.callback(self, self.val().length, i);
                        }
                    }
                } else {
                    if (typeof opts.callback == 'function') {
                        opts.callback(self, self.val().length, i);
                    }
                }
            }
        })
        $self.on('input', function() {
            var self = $(this);
            if (!cpLock[i]) {
                if (opts.MaxLength) {
                    if (self.val().length > (opts.MaxLength - 0)) {
                        self.val(self.val().substring(0, opts.MaxLength - 0));
                        if (typeof opts.callback == 'function') {
                            opts.callback(self, self.val().length, i);
                        }
                    } else {
                        if (typeof opts.callback == 'function') {
                            opts.callback(self, self.val().length, i);
                        }
                    }
                } else {
                    if (typeof opts.callback == 'function') {
                        opts.callback(self, self.val().length, i);
                    }
                }
            }
        });

    })
}