javascriptbuttononclickonkeydownonkeypress

Trigger a button click with JavaScript on the Enter key in a text box


I have one text input and one button (see below). How can I use JavaScript to trigger the button's click event when the Enter key is pressed inside the text box?

There is already a different submit button on my current page, so I can't simply make the button a submit button. And, I only want the Enter key to click this specific button if it is pressed from within this one text box, nothing else.

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

Solution

  • In jQuery, the following would work:

    $("#id_of_textbox").keyup(function(event) {
        if (event.keyCode === 13) {
            $("#id_of_button").click();
        }
    });
    

    $("#pw").keyup(function(event) {
        if (event.keyCode === 13) {
            $("#myButton").click();
        }
    });
    
    $("#myButton").click(function() {
      alert("Button code executed.");
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    Username:<input id="username" type="text"><br>
    Password:&nbsp;<input id="pw" type="password"><br>
    <button id="myButton">Submit</button>

    Or in plain JavaScript, the following would work:

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

    document.getElementById("pw")
        .addEventListener("keyup", function(event) {
        event.preventDefault();
        if (event.keyCode === 13) {
            document.getElementById("myButton").click();
        }
    });
    
    function buttonCode()
    {
      alert("Button code executed.");
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    Username:<input id="username" type="text"><br>
    Password:&nbsp;<input id="pw" type="password"><br>
    <button id="myButton" onclick="buttonCode()">Submit</button>