[英]How to detect when the user presses Enter in an input field
我只有 1 個輸入字段,我想注冊 onChange 和 onKeyPress 事件來檢測用戶何時完成輸入或按下 Enter 鍵。 我只需要使用 javascript。 謝謝您的幫助。
我有:
var load = function (){
//I want to trigger this function when user hit Enter key.
}
document.getElementById('co').onchange=load; //works great
document.getElementById('co').onKeyPress=load;
//not sure how to detect when user press Enter
html
//no form just a single input field
<input type='text' id='co'>
document.getElementById('foo').onkeypress = function(e){
if (!e) e = window.event;
var keyCode = e.code || e.key;
if (keyCode == 'Enter'){
// Enter pressed
return false;
}
}
到目前為止,這些答案都沒有具體回答這個問題。 問題分為兩部分。 1. 按下回車鍵。 2. 使用集中在輸入上。
查詢
$('#input-id').on("keyup", function(e) {
if (e.keyCode == 13) {
console.log('Enter');
}
});
原生 JavaScript
inputId = document.getElementById('input-id');
inputId.addEventListener('keyup', function onEvent(e) {
if (e.keyCode === 13) {
console.log('Enter')
}
});
這樣 ENTER 僅在用戶從該輸入中按下 Enter 時才被檢測到。
更新更event.key
:使用event.key
而不是event.keyCode
。 沒有更多的任意數字代碼!
const node = document.getElementById('co');
node.addEventListener('keydown', function onEvent(event) {
if (event.key === "Enter") {
return false;
}
});
要使其跨瀏覽器:
document.getElementById('foo').onkeypress = function(e) {
var event = e || window.event;
var charCode = event.which || event.keyCode;
if ( charCode == '13' ) {
// Enter pressed
return false;
}
}
有關更多詳細信息,請參閱此問題: javascript event e.which?
使用 event.keyCode
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) { //Enter keycode
//Do something
}
這是一個很好的鏈接,討論了這個主題並提供了一個工作示例
function DetectEnterPressed(e) {
var characterCode
if(e && e.which){ // NN4 specific code
e = e
characterCode = e.which
}
else {
e = event
characterCode = e.keyCode // IE specific code
}
if (characterCode == 13) return true // Enter key is 13
else return false
}
我使用此代碼,它工作正常:
document.getElementById("theIdHere").onkeypressed =
function() {
if(this.event.which === 13)
console('passed');
}
如今,您可以通過以下方式做到這一點:
document.getElementById('co').addEventListener('keydown',
e => !e.repeat && e.keyCode === 13 && load());
請注意load()
將運行一次。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.