前话: 如果直接通过input监听, 它是键盘输入按键按下了就触发时间,这样可能导致一些问题,比如在谷歌浏览器想输入中文输入不了;

解决方案: 用 compositionstart compositionend, 这个 会在选定文字后才出发 input 事件;

注意: 因为谷歌浏览器跟其他浏览器的执行顺序不同, 谷歌是 compositionstart  => 监听input事件 => compositionend,   其他浏览器是 compositionstart  => compositionend => 监听input事件,

所以 要在 compositionend 里面判断是否是谷歌浏览器,做浏览器的兼容输入;

另外还有一个坑, 就是 即时搜索input监听  ajax  请求接口的时候,不同做同步 async: false, 必须异步, 不然浏览器直接卡死崩溃,这个在本地测试不会出问题,到线上就出现!!!

        var flag = false; // true 正在输入

        // 这里 input是自己input元素,比如id #id这种
$('body').on('compositionstart', ' .search_code .layui-select-title input', function(){
flag = true;
}); $('body').on('compositionend', '.search_code .layui-select-title input', function(){
flag = false; // 判断是否是谷歌浏览器
if(!flag && isChrome()){
changeEvent(this)
} }); // 监听input事件
$('body').on('input change', '.search_code .layui-select-title input', function(){
changeEvent(this)
}) function changeEvent(_this){
if(!flag){
// 输入的值
var val = $.trim($(_this).val()); $.ajax({
url: '接口url',
type: 'post',
dataType: 'json',
contentType:'application/json; charset=utf-8',
// async: false, // 不能是同步
data: params,
success: function (res) {
console.log(res);
var data = res.data;
if (res) {
var html = ''; if (res.code != 0) {
html += '<option value="" >请输入食品编码或名称来搜索</option>';
} else {
for(var i=0; i<data.length; i++){
html += '<option value="'+ data[i].code +'">';
html += data[i].code + ' '+ data[i].name + '</option>';
}
} $('select[name=food_code]').html(html); // 保持聚焦, 不然输入后就没光标了
$('.search_code .layui-select-title input').focus(); // 重新赋值上去,不同写法自己要做改变
$('.search_code .layui-select-title input').val(val); }
}
});
}
} /**
* 判断是否是谷歌
*/
function isChrome(){
var browser = {
versions: function() {
var u = navigator.userAgent, app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
} if(browser.versions.webKit){
return true;
} return false;
}

监听input框变化,即时搜索 compositionstart, compositionend的更多相关文章

  1. onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)

    转自:https://www.cnblogs.com/white0710/p/7338456.html 1. onchange事件监听input值变化的使用方法: <input id=" ...

  2. 监听INPUT值的即时变化

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 通过定时监听input框来实现onkeyup事件-

    问题:因为zepto无法使用onkeyup 事件 解决方法:通过给input框绑定focus 事件,定时的去监听input的值得改变,在鼠标移出input后,清除定时器 <!DOCTYPE ht ...

  4. angular4 监听input框输入值的改变

    angular中一般控件会有change事件,但是如果某些控件没有这个事件 我们如何监听值的变化呢? 对于双向绑定的值,当值改变后监听事件有如下写法: 1. 如果是ngModel可以用ngModelC ...

  5. JS监听input框的回车事件、属性值改变事件

    一.介绍 在程序猿门的工作中,经常会遇见一些表单数据的提交,对于有表单的东西而言,input输入框是非常常见的,所以对于一些input的基本事件,我们需要去掌握 二.input的监听enter事件 比 ...

  6. juery中监听input的变化事件

    $('#searchValue').bind('input propertychange', function() { searchFundList(); });

  7. js监听文本框变化事件

    用js有两种写法: 法一: <!DOCTYPE HTMl> <html> <head> <title> new document </title& ...

  8. 利用原生JS实时监听input框输入值

    传送门https://www.cnblogs.com/lantinggumo/p/7636715.html 传送门https://www.cnblogs.com/nailc/p/8572226.htm ...

  9. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

随机推荐

  1. 7、组件注册-@Conditional-按照条件注册bean

    7.组件注册-@Conditional-按照条件注册bean @Conditional 按照一定的条件进行判断,满足条件给容器注入bean 按照条件进行动态装配. Spring 4 开始提供的一个注解 ...

  2. 016_linux驱动之_原子操作

    1. 原子操作 原子操作指的是在执行过程中不会被别的代码路径所中断的操作. 常用原子操作函数举例: atomic_t v = ATOMIC_INIT(0);     //定义原子变量v并初始化为0 a ...

  3. 配置apt源

    vim /etc/apt/source.list 配置完成后执行 apt update apt upgrade 配置完源之后,就可以在源中所有想要的包 apt search xxx 本地自带的源配目录 ...

  4. redis数据存储--redis在Windows下的安装过程

    一.下载软件 1. 下载Redis windows版本,Redis官网下载地址为:https://redis.io/download: 这里下载的是Windows版本,下载地址为:https://gi ...

  5. CF1182F Maximum Sine【类欧,扩欧】

    题目链接:洛谷 题目描述:求整数$x\in [a,b]$使得$|2px \ mod \ 2q-q|$最小,如果有多个$x$输出最小的. 数据范围:$1\leq a,b,p,q\leq 10^9$ 第一 ...

  6. sql mode 问题及解决 错误代码:1055 this is incompatible with sql_mode=only_full_group_by

    数据库升级到5.7.21后,一个正常的分组后按日期排序,并返回数据的语句开始报错: 语句如下: SELECT id,title,add_time FROM `message` GROUP BY add ...

  7. easyui复选框实现单选框

    $(':checkbox[name=primary_key_flag]').each(function(){ $(this).click(function(){ if(this.checked){ $ ...

  8. Pluck CMS 4.7.10远程代码执行漏洞分析

    本文首发于先知: https://xz.aliyun.com/t/6486 0x01漏洞描述 Pluck是用php编写的一款的小型CMS影响版本:Pluck CMS Pluck CMS 4.7.10( ...

  9. 冲刺阶段——Day3

    [今日进展] 完善黄金点游戏的算法与代码架构. 将文字界面改编为图形界面 码云链接:https://gitee.com/jxxydwt1999/20175215-java/blob/master/Go ...

  10. 图解如何利用Intellij IDEA进行代码重构

    源:https://jingyan.baidu.com/article/c45ad29c64f7e7051653e27d.html 重命名类,打开 Refactor -> Rename 或 Sh ...