Trigger a Button Click With JavaScript on the Enter Key in a Text Box

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

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: <input id="pw" type="password"><br>

<button id="myButton">Submit</button>

Trigger a button click with JavaScript when Enter key is pressed

You just need to add your event listener to the document instead of the input

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

Pressing enter in text box to trigger click on a button

Element.keyup is not a function.

To add a keyup event listener to an input, you can use Element.onkeyup, Element.addEventListener("keyup", function(){}), or add an inline onkeyup event handler to the element.

Generally, to add an event listener to an Element, the syntax is Element.on[eventname] or Element.addEventListener("[eventname]"
, function(){})

Using Element.onkeyup:

<input id="myInput" type="text" name="txt" placeholder="Enter Tag name and click Add "autocomplete="off"/> 

<input id='mybtn' class="btn btn-primary" type="button" value="Add" onClick="retrieve('myInput');"/>

<script>

document.getElementById('myInput').onkeyup=function(e){

    if(e.keyCode==13){

        document.getElementById('mybtn').click();

    }

}

function retrieve(id){

 console.log("Value: "+document.getElementById(id).value);

}

</script>

How to trigger click event when pressing enter key? Text area

Although you can use the onkeydown attribute I prefer to do these things through JavaScript event listeners & handlers. If you want to do this with the onkeydown attribute then look at Bryan's answer.

I would first add an ID/Class name to the input so we can easily target it. In my example i will add searchTextas the ID for this input.

JavaScript:

document.getElementById('searchText').addEventListener("keydown",function(e){
  if(e.keyCode == 13){
   //doSomething()
  } 
});

jQuery:

$('#searchText').on('keydown',function(e){
  if(e.which == '13'){
    //doSomething();
  } 
});

Trigger a button click on the Enter key in a text box misses its value

The problem is that the enter key defaults to submitting your form, even without a submit button. So you should block the submission by changing the event binding to keypress and using event.preventDefault(), like this:

$("#inputbox").keypress(function(event){
    if(event.keyCode == 13){
        event.preventDefault();
        $("#search").click();
    }
});

Alternatively, you could use .submit() to trigger your function, change the input type to submit, and avoid separate handling for keys and clicks.

HTML:

<form action="" method="post" id="contactForm">
    <input id='inputbox' name="inputbox" type="text" />
    <input type="submit" value="Search">
</form>

JavaScript:

$(document).ready(function() {
    $("#contactForm").submit(submitSearch);
}); 

function submitSearch(event) {
     event.preventDefault();

     //do other stuff
     alert($("#inputbox").val());
}

How to trigger enter key on click a button after writing some text on text box in angularjs

Add a ng-keyup to the input:

<input type="text" ng-keyup="$event.keyCode == 13 ? myFunct() : null">

---

Related Topics