問(wèn)題：在中文輸入法輸入文字時(shí)按ENTER鍵；綁定keyup事件會(huì)將輸入法中的英文文字輸入到文字框并直接觸發(fā)發(fā)送按鈕

鍵盤(pán)事件：

當(dāng)一個(gè)按鍵被pressed或者released，在每一個(gè)瀏覽器中都可能會(huì)觸發(fā)三種鍵盤(pán)事件

keydown
keypress
keyup

keydown事件發(fā)生在按鍵被按下的時(shí)候，接著觸發(fā)keypress，松開(kāi)按鍵的時(shí)候觸發(fā)keyup事件

中文輸入法：

firfox：輸入觸發(fā)keydown，回車(chē)確認(rèn)輸入觸發(fā)keyup
chrome：輸入觸發(fā)keydown、keyup，回車(chē)確認(rèn)輸入只觸發(fā)keydown
IE：輸入觸發(fā)keydown、keyup，回車(chē)確認(rèn)輸入觸發(fā)keydown，keyup
Safari：輸入觸發(fā)keydown、keyup，回車(chē)確認(rèn)輸入觸發(fā)keydown，keyup
opera：輸入觸發(fā)keydown、keyup，回車(chē)確認(rèn)輸入觸發(fā)keydown，keyup
在input、textarea中，中文輸入法時(shí)：沒(méi)有觸發(fā)keypress事件

keypress事件：對(duì)中文輸入法支持不好，無(wú)法響應(yīng)中文輸入；無(wú)法響應(yīng)系統(tǒng)功能鍵

HTML代碼：

<textarea name="" id="text" cols="30" rows="5"></textarea> 
  <script type="text/javascript"> 
    var text = document.getElementById('text'); 
    text.onkeydown = function(e) { 
      console.log('keydown'); 
      if(e.keyCode == 13) { 
        console.log('keydown enter send'); 
      } 
      console.log('value', text.value); 
    } 
    text.onkeypress = function(e) { 
      console.log('keypress'); 
      console.log('value', text.value); 
    } 
    text.onkeyup = function(e) { 
      console.log('keyup'); 
      if(e.keyCode == 13) { 
        console.log('keyup enter send'); 
      } 
      console.log('value', text.value); 
    } 
  </script>

英文輸入法：

上圖可得結(jié)論：

keydown、keypress發(fā)生在文字還沒(méi)敲入輸入框時(shí)，如果在keydown、keypress事件中輸出文本框的文本，得到的是觸發(fā)鍵盤(pán)事件前文本框中的文本；

keyup事件觸發(fā)時(shí)，整個(gè)鍵盤(pán)事件輸入文字的操作已經(jīng)完成，得到的是觸發(fā)鍵盤(pán)事件后的文本內(nèi)容。

中文輸入法：【沒(méi)有keypress事件】

按下enter鍵確認(rèn)后：

中文輸入法在輸入未確定時(shí)按下回車(chē)鍵，keydown與keyup效果不同，keydown不會(huì)觸發(fā)預(yù)設(shè)的回車(chē)方法事件

解答：

大多數(shù)輸入法都是在keydown中完成輸入過(guò)程，所以如果回車(chē)提交是在keyup事件中的話(huà)就會(huì)出現(xiàn)輸完字后直接觸發(fā)回車(chē)鍵提交，從而產(chǎn)生沖突問(wèn)題。

辦法：回車(chē)提交事件改為keydown，這時(shí)候當(dāng)keydown事件發(fā)生的時(shí)候是在輸入法上，而不會(huì)發(fā)生在提交框的發(fā)送事件上，進(jìn)而解決了沖突?！?/span>

部分tips：

KeyDown觸發(fā)后，不一定觸發(fā)KeyUp，當(dāng)KeyDown 按下后，拖動(dòng)鼠標(biāo)，那么將不會(huì)觸發(fā)KeyUp事件。

KeyPress主要用來(lái)捕獲數(shù)字(注意：包括Shift+數(shù)字的符號(hào))、字母（注意：包括大小寫(xiě)）、小鍵盤(pán)等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜單鍵}、{開(kāi)始鍵}和方向鍵外的ANSI字符

KeyDown 和KeyUp 通?？梢圆东@鍵盤(pán)除了PrScrn所有按鍵

KeyPress 只能捕獲單個(gè)字符

KeyDown 和KeyUp 可以捕獲組合鍵。

KeyPress 可以捕獲單個(gè)字符的大小寫(xiě)

KeyDown和KeyUp 對(duì)于單個(gè)字符捕獲的KeyValue 都是一個(gè)值，也就是不能判斷單個(gè)字符的大小寫(xiě)。

KeyPress 不區(qū)分小鍵盤(pán)和主鍵盤(pán)的數(shù)字字符。

KeyDown 和KeyUp 區(qū)分小鍵盤(pán)和主鍵盤(pán)的數(shù)字字符。

其中PrScrn 按鍵KeyPress、KeyDown和KeyUp 都不能捕獲。

在使用鍵盤(pán)的時(shí)候，通常會(huì)使用到CTRL+SHIFT+ALT 類(lèi)似的組合鍵功能。

以上這篇輸入法的回車(chē)與消息發(fā)送快捷鍵回車(chē)的沖突解決方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論