input事件中文触发多次问题研究

zorro 发布于2019-08-26 11:34 / 2104人阅读

摘要：而则在我们完成当前中文的输入触发。看以下代码事件触发我们通过，事件来设置，判断是否正在进行输入中文以控制事件的响应，看上去没有问题，但实际执行时会发现在谷歌浏览器中执行顺序要先于，火狐执行顺序正常，但会响应两次。

我们在网页中经常会遇到实时搜索的情况，或者其他类似需要input实时响应的问题，一般情况下，我们是利用input和propertychange事件来监听input内容的变化来响应，但是有一个问题就是当输入汉字的时候，可能我们要输入 ‘实时’ 的时候，我们的input框中会出现 "shishi"直到我们的空格才会变成 "实时",这也就意味着我们依次响应了 "s","sh","shi","shis","shish","shishi","实时"，前面的结果明显不是我们需要的，造成了我们很多次无用的提交，如果是接口请求，那更要命，多发了好多次请求。

　　最早之前有一个稍微能改善的解决方案就是配合一个定时器延时执行，这样能减少请求次数，但是这个减少是不分情况的减少，还是治标不治本。

　　今天偶然看到几个事件，发现可以完美解决这种问题。我们来看一下这几个事件

　　compositionstart ， compositionupdate ，compositionend 　

　 compositionstart 官方解释：触发于一段文字的输入之前（类似于 keydown 事件，但是该事件仅在若干可见字符的输入之前，而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词），通俗点，假如我们要输入一段中文，当我们按下第一个字母的时候触发。

　　相应的compositionupdate在我们中文开始输入到结束完成的每一次keyup触发。

　　而compositionend则在我们完成当前中文的输入触发。

　　正题来了，通过上面的事件我们就可以完美的解决中文输入的响应问题了，从compositionstart触发开始，意味着中文输入的开始且还没完成，所以此时我们不需要做出响应，在compositionend触发时，表示中文输入完成，这时我们可以做相应事件的处理。

　　所以我们可以设置一个变量，或者给input定义一个属性，在compositionstart到compositionend之间对input事件不做出响应。看以下代码

$("input").on({
  input : function(e){        
      var flag = e.target.isNeedPrevent;
      if(flag)  return;     
      response() 
  },
  compositionstart : function(e){
      e.target.isNeedPrevent = true ;
  },
  compositionend : function(e){
      e.target.isNeedPrevent = false;        
  }
})
function response(){
  $("div").append("事 件触发")
}

我们通过compositionstart，compositionend事件来设置flag，判断是否正在进行输入中文以控制input事件的响应，看上去没有问题，但实际执行时会发现在谷歌浏览器中input执行顺序要先于compositionend，火狐执行顺序正常，但compositionend会响应两次。这就导致谷歌浏览器中输入汉字不会响应input事件。当然也可以在compositionend事件中再执行一次response事件，这样的问题是在火狐浏览器中会多执行一次response，显然不是最优方案。

　　经过试验，发现keyup和compositionend事件执行顺序在各大浏览器都保持一致，于是我们改成如下代码：

 $("input").on({
   keyup : function(e){        
       var flag = e.target.isNeedPrevent;
       if(flag)  return;     
       response() 
   },
   compositionstart : function(e){
       e.target.isNeedPrevent = true ;
   },
   compositionend : function(e){
       e.target.isNeedPrevent = false;  
       
   }
})
function response(){
       $("div").append("事 件触发")
}

这样在各个浏览器基本保持一致了（兼容compositionstart的浏览器）。但是keyup有一个问题，比如通过鼠标复制粘贴的时候并不相应keyup事件，所以上面的事情我们还需要再优化下，keyup相应按键事件，input响应除了keyup之外的变化事件。代码如下

$("input").on({
    keyup : function(e){        
        var flag = e.target.isNeedPrevent;
        if(flag)  return;     
        response() ;
        e.target.keyEvent = false ;
        
    },
    keydown : function(e){
        e.target.keyEvent = true ; 
    },
    input : function(e){
        if(!e.target.keyEvent){
            response()
        }        
    },
    compositionstart : function(e){
        e.target.isNeedPrevent = true ;
    },
    compositionend : function(e){
        e.target.isNeedPrevent = false;
        
    }
})
function response(){
        $("div").append("事 件触发")
}

最终效果实现：
在线预览：

云服务器 GPU云服务器多次触发多次注册事件事件触发事件触发器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107153.html

input事件中文触发多次问题研究

摘要：而则在我们完成当前中文的输入触发。看以下代码事件触发我们通过，事件来设置，判断是否正在进行输入中文以控制事件的响应，看上去没有问题，但实际执行时会发现在谷歌浏览器中执行顺序要先于，火狐执行顺序正常，但会响应两次。我们在网页中经常会遇到实时搜索的情况，或者其他类似需要input实时响应的问题，一般情况下，我们是利用input和propertychange事件来监听input内容的变化来...

王晗 2019-08-01 18:30 评论0 收藏0
从0开始构建自己的前端知识体系-JS-事件-键盘事件总结

摘要：在探寻的过程中发现自己对键盘输入事件的理解还并不到位，以至于有一些代码看得云里雾里，赶紧查阅资料写写总结一下下文所说只在与里做了探究。短按触发顺序长按触发顺序循环事件阻止冒泡这类事件都会冒泡，阻止按照常规调用接口就可以阻止冒泡了。前言最近因一个需求在element-ui的Select组件文档内找不到对应的示例，也就是filter-method方法的具体使用样例，尝试几次之后也使用了...

Anonymous1 2019-08-22 15:55 评论0 收藏0
中文输入法与React文本输入框的问题与解决方案

摘要：本文的目的是希望能针对这个问题提供一些说明现在暂时性的解决方案。完全不会有问题的只有一个浏览器，就是上面注释中所说的已经实作出的，上可能根本不需要任何解决方案，它的输入法编辑器是独立于浏览器上的文本输入框之外的。问题来源是来自这个React官方存储库的issue #3926，与这个议题关联的有很多其他的issue，来自许多项目，有些是与React相关，有些则是vue或其它JS套件。也...

shevy 2019-08-21 15:01 评论0 收藏0
工作手记之移动端中文输入法触发oninput事件的解决方法

摘要：经过在网上的查找，找到了和两个事件进行一个开关判断。关于事件是的标准事件，对于检测和这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像事件需要失去焦点才触发。补充最近测试了下发现在事件之后才触发。。。事件背景工作过程中涉及到了移动端输入内容长度的限定，这就要求需要对输入过程中内容的变化进行监控和判定，以决定是否可以继续输入，所以就想着是否可以在相关输入处监听...

姘存按 2019-08-20 12:21 评论0 收藏0
前端培训-初级阶段-场景实战（2019-05-30）-input 搜索如何防抖，如何处理中文输入

摘要：在掘金摸鱼的时候看到了一个题第题搜索如何防抖，如何处理中文输入，感觉挺有意思的。测试地址事件输入法事件输入法的第一个字母时触发。输入法状态输入内容。输入法选择之后触发。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我...

Yuanf 2019-08-26 13:57 评论0 收藏0