input事宜中文触发屡次题目研讨

2023年4月22日 195次阅读 来源: 樊一

我们在网页中经常会碰到及时搜刮的状况，或许其他相似须要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('<p>事 件触发</p>')
}

我们经由过程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('<p>事 件触发</p>')
}

如许在各个浏览器基础保持一致了（兼容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('<p>事 件触发</p>')
}

终究结果完成：
在线预览：

    原文作者：樊一
    原文地址: https://segmentfault.com/a/1190000013094932
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞