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

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

中文輸入法在輸入未確定時(shí)按下回車鍵,keydown與keyup效果不同,keydown不會觸發(fā)預(yù)設(shè)的回車方法事件
解答:
大多數(shù)輸入法都是在keydown中完成輸入過程,所以如果回車提交是在keyup事件中的話就會出現(xiàn)輸完字后直接觸發(fā)回車鍵提交,從而產(chǎn)生沖突問題。
辦法:回車提交事件改為keydown,這時(shí)候當(dāng)keydown事件發(fā)生的時(shí)候是在輸入法上,而不會發(fā)生在提交框的發(fā)送事件上,進(jìn)而解決了沖突。
部分tips:
KeyDown觸發(fā)后,不一定觸發(fā)KeyUp,當(dāng)KeyDown 按下后,拖動鼠標(biāo),那么將不會觸發(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 只能捕獲單個(gè)字符
KeyDown 和KeyUp 可以捕獲組合鍵。
KeyPress 可以捕獲單個(gè)字符的大小寫
KeyDown和KeyUp 對于單個(gè)字符捕獲的KeyValue 都是一個(gè)值,也就是不能判斷單個(gè)字符的大小寫。
KeyPress 不區(qū)分小鍵盤和主鍵盤的數(shù)字字符。
KeyDown 和KeyUp 區(qū)分小鍵盤和主鍵盤的數(shù)字字符。
其中PrScrn 按鍵KeyPress、KeyDown和KeyUp 都不能捕獲。
在使用鍵盤的時(shí)候,通常會使用到CTRL+SHIFT+ALT 類似的組合鍵功能。
以上這篇輸入法的回車與消息發(fā)送快捷鍵回車的沖突解決方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序--特定區(qū)域滾動到頂部時(shí)固定的方法
這篇文章主要介紹了微信小程序--特定區(qū)域滾動到頂部時(shí)固定的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
10 種最常見的 Javascript 錯(cuò)誤(頻率最高)
本文是小編給大家收藏的JavaScript 中頻度最高的 10 種錯(cuò)誤,我們會告訴你什么原因?qū)е铝诉@些錯(cuò)誤,以及如何防止這些錯(cuò)誤發(fā)生。需要的朋友參考下2018-02-02
js使用數(shù)組判斷提交數(shù)據(jù)是否存在相同數(shù)據(jù)
判斷提交數(shù)據(jù)是否存在相同數(shù)據(jù),在本文將為大家介紹使用數(shù)組做到這一點(diǎn),感興趣的朋友可以參考下2013-11-11
JS加密插件CryptoJS實(shí)現(xiàn)AES加密操作示例
這篇文章主要介紹了JS加密插件CryptoJS實(shí)現(xiàn)AES加密操作,結(jié)合實(shí)例形式分析了CryptoJS插件的具體設(shè)置與AES加密操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-08-08
javascript動態(tài)設(shè)置樣式style實(shí)例分析
這篇文章主要介紹了javascript動態(tài)設(shè)置樣式style的方法,實(shí)例分析了javascript操作style樣式的易錯(cuò)點(diǎn)和相關(guān)使用技巧,需要的朋友可以參考下2015-05-05
webpack里使用jquery.mCustomScrollbar插件的方法
malihu-custom-scrollbar-plugin是一個(gè)依賴jquery的自定義網(wǎng)頁滾動條樣式插件,這篇文章主要介紹了webpack里使用jquery.mCustomScrollbar插件的方法,感興趣的小伙伴們可以參考一下2018-05-05
JavaScript反轉(zhuǎn)數(shù)組常用的4種方法
這篇文章主要給大家介紹了關(guān)于JavaScript反轉(zhuǎn)數(shù)組常用的4種方法,反轉(zhuǎn)數(shù)組可以將數(shù)組中的元素順序顛倒過來,從而達(dá)到一些特定的需求,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
JavaScript的new date等日期函數(shù)在safari中遇到的坑
safari中對于JavaScript的new Date函數(shù)的支持有一個(gè)比較奇怪的問題,帶著這個(gè)奇怪的問題我們通過本文一起學(xué)習(xí)吧2016-10-10

