檢測在沒有jQuery的html輸入中輸入keypress

我只想檢測我的android設備上的輸入輸入按鍵。我發現，使用jQuery，我們可以做如下：檢測在沒有jQuery的html輸入中輸入keypress

$('#inputText').keypress(function(event) { 
var keycode = event.keyCode || event.which; 
if(keycode == '13') { 
    alert('You pressed a "enter" key in somewhere');  
} 
});

但我不想使用jquery。我想用傳統的方式如使用

的document.getElementById（「inputText的」）

但我不知道如何在按鍵事件函數添加。你們有什麼想法嗎？

來源

2017-03-07 Coolguy

您可以使用addEventListener

的document.getElementById（ 'inputText的'）的addEventListener（「按鍵」功能（）{}）。

來源

2017-03-07 09:34:20

幾乎與jQuery相同。使用eventListener並將參數e傳遞給捕獲事件的函數，它的格式爲keyCode。

var elem = document.getElementById('inputText'); 
 
elem.addEventListener('keypress', function(e){ 
 
    if (e.keyCode == 13) { 
 
    console.log('You pressed a "enter" key in somewhere'); 
 
    } 
 
});

<input id='inputText'>

來源

2017-03-07 09:34:50

大演示類用戶！這可以在android中工作嗎？ – Coolguy

@Coolguy我沒有自己測試，但我想是這樣。 –

@Arun D感謝您的編輯，但我更願意避免使用DOM事件，「onkeypress」或「onclick」。（： –

你可以做到這一點..

document.getElementById("id_of_textbox") 
     .addEventListener("keyup", function(event) { 
     event.preventDefault(); 
     if (event.keyCode == 13) { 
      document.getElementById("id_of_button").click(); 
     }

另一種方法是使用onkeypress

<input type="text" id="txtSearch" onkeypress="return searchKeyPress(event);" /> 

<script> 
function searchKeyPress(e) 
{ 
    // look for window.event in case event isn't passed in 
    e = e || window.event; 
    if (e.keyCode == 13) 
    { 
     document.getElementById('btnSearch').click(); 
     return false; 
    } 
    return true; 
} 
</script>

來源

2017-03-07 09:36:21

您可以使用

document.getElementById('txtBox').onkeypress = function(e) { 
 
    if (!e) e = window.event; 
 
    var keyCode = e.keyCode || e.which; 
 
    if (keyCode == '13') { 
 
    alert("Enter Pressed"); 
 

 
    } 
 
}

<input id="txtBox" type="text" />

來源

2017-03-07 09:50:35

document.getElementById("id").onKeyDown = function(event) {if (event.keycode === 13) alert("return pressed";)};

來源

2017-03-07 16:16:37

or keypressed or keyup –

這樣做：

<form onsubmit="Search();" action="javascript:void(0);"> 
<input type="text" id="searchCriteria" placeholder="Search Criteria"/> 
<input type="button" onclick="Search();" value="Search" id="searchBtn"/>

來源

2017-04-12 18:32:22 Mathew

你可以給答案增加一些解釋嗎？雖然只有代碼的答案可以解決這個問題，但它通常不會教會任何操作，並且不會對未來的用戶有用。 – Cullub

使用event.key，而不是event.keyCode！

const node = document.getElementById('inputText'); 
node.addEventListener('keydown', function onEvent(event) { 
    if (event.key === "Enter") { 
     // Do something 
    } 
});

Mozilla Docs

Supported Browsers

來源

2017-09-05 21:32:03 Gibolt

檢測在沒有jQuery的html輸入中輸入keypress

回答

相關問題