在没有jquery的情况下检测html输入中的Enter keypress

I just want to detect the enter input keypress on my android device. I found out that using jquery, we can do like below:

我只是想在我的Android设备上检测输入输入按键。我发现使用jquery,我们可以这样做:

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

But I don't want to use jquery. I want to use the traditional way like using

但我不想使用jquery。我想用传统的方式来使用

document.getElementById('inputText')

But I don't know how to add in the keypress event function. Do you guys have any idea?

但我不知道如何添加按键事件功能。你们有什么想法吗?

7 个解决方案

#1

Almost the same as in jQuery. Use eventListener and pass an argument e to the function to catch the event and it's keyCode.

与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'>

#2

You can do this..

你可以这样做..

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

Another way is using onkeypress

另一种方法是使用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>

#3

You can use

您可以使用

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" />

#4

You can use addEventListener

您可以使用addEventListener

document.getElementById('inputText').addEventListener("keypress", function() {});

document.getElementById('inputText')。addEventListener(“keypress”,function(){});

#5

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

#6

Do this :

做这个 :

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

#7

Use event.key instead of event.keyCode!

使用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

#1