輸入法的回車與消息發(fā)送快捷鍵回車的沖突解決方法
問題:在中文輸入法輸入文字時按ENTER鍵;綁定keyup事件會將輸入法中的英文文字輸入到文字框并直接觸發(fā)發(fā)送按鈕
鍵盤事件:
當一個按鍵被pressed或者released,在每一個瀏覽器中都可能會觸發(fā)三種鍵盤事件
keydown
keypress
keyup
keydown事件發(fā)生在按鍵被按下的時候,接著觸發(fā)keypress,松開按鍵的時候觸發(fā)keyup事件
中文輸入法:
firfox:輸入觸發(fā)keydown,回車確認輸入觸發(fā)keyup
chrome:輸入觸發(fā)keydown、keyup,回車確認輸入只觸發(fā)keydown
IE:輸入觸發(fā)keydown、keyup,回車確認輸入觸發(fā)keydown,keyup
Safari:輸入觸發(fā)keydown、keyup,回車確認輸入觸發(fā)keydown,keyup
opera:輸入觸發(fā)keydown、keyup,回車確認輸入觸發(fā)keydown,keyup
在input、textarea中,中文輸入法時:沒有觸發(fā)keypress事件
keypress事件:對中文輸入法支持不好,無法響應中文輸入;無法響應系統(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ā)生在文字還沒敲入輸入框時,如果在keydown、keypress事件中輸出文本框的文本,得到的是觸發(fā)鍵盤事件前文本框中的文本;
keyup事件觸發(fā)時,整個鍵盤事件輸入文字的操作已經(jīng)完成,得到的是觸發(fā)鍵盤事件后的文本內(nèi)容。
中文輸入法:【沒有keypress事件】

按下enter鍵確認后:

中文輸入法在輸入未確定時按下回車鍵,keydown與keyup效果不同,keydown不會觸發(fā)預設的回車方法事件
解答:
大多數(shù)輸入法都是在keydown中完成輸入過程,所以如果回車提交是在keyup事件中的話就會出現(xiàn)輸完字后直接觸發(fā)回車鍵提交,從而產(chǎn)生沖突問題。
辦法:回車提交事件改為keydown,這時候當keydown事件發(fā)生的時候是在輸入法上,而不會發(fā)生在提交框的發(fā)送事件上,進而解決了沖突?!?/span>
部分tips:
KeyDown觸發(fā)后,不一定觸發(fā)KeyUp,當KeyDown 按下后,拖動鼠標,那么將不會觸發(fā)KeyUp事件。
KeyPress主要用來捕獲數(shù)字(注意:包括Shift+數(shù)字的符號)、字母(注意:包括大小寫)、小鍵盤等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜單鍵}、{開始鍵}和方向鍵外的ANSI字符
KeyDown 和KeyUp 通常可以捕獲鍵盤除了PrScrn所有按鍵
KeyPress 只能捕獲單個字符
KeyDown 和KeyUp 可以捕獲組合鍵。
KeyPress 可以捕獲單個字符的大小寫
KeyDown和KeyUp 對于單個字符捕獲的KeyValue 都是一個值,也就是不能判斷單個字符的大小寫。
KeyPress 不區(qū)分小鍵盤和主鍵盤的數(shù)字字符。
KeyDown 和KeyUp 區(qū)分小鍵盤和主鍵盤的數(shù)字字符。
其中PrScrn 按鍵KeyPress、KeyDown和KeyUp 都不能捕獲。
在使用鍵盤的時候,通常會使用到CTRL+SHIFT+ALT 類似的組合鍵功能。
以上這篇輸入法的回車與消息發(fā)送快捷鍵回車的沖突解決方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Web前端框架bootstrap實戰(zhàn)【第一次接觸使用】
Bootstrap是Twitter推出的一個開源的前端框架。這篇文章主要介紹了Web前端框架bootstrap實戰(zhàn),需要的朋友可以參考下2016-12-12
js項目中雙向數(shù)據(jù)綁定的簡單實現(xiàn)方法
雙向數(shù)據(jù)綁定指的就是,綁定對象屬性的改變到用戶界面的變化的能力,反之亦然,下面這篇文章主要給大家介紹了關于js項目中雙向數(shù)據(jù)綁定的簡單實現(xiàn)方法,需要的朋友可以參考下2021-08-08
關于better-scroll插件的無法滑動bug(2021通過插件解決)
這篇文章主要介紹了關于better-scroll插件的無法滑動bug(2021通過插件解決),本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-03-03
JavaScript之a(chǎn)ppendChild、insertBefore和insertAfter使用說明
這幾天需要用到對HTML節(jié)點元素的刪/插操作,由于用到insertBefore方法的時候遇到了一些麻煩,現(xiàn)在作為知識的整理,分別對appendChild、insertBefore和insertAfter做個總結(jié)2010-12-12
CheckBox多選取值及判斷CheckBox選中是否為空的實例
下面小編就為大家?guī)硪黄狢heckBox多選取值及判斷CheckBox選中是否為空的實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
javascript實現(xiàn)PC網(wǎng)頁里的拖拽效果
這篇文章主要介紹了javascript實現(xiàn)PC網(wǎng)頁里的拖拽效果的相關資料,需要的朋友可以參考下2016-03-03

