How to Trigger HTML Button When You Press Enter in Textbox

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>

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>

Pressing enter key on input field triggers button click function

When you have a button in a form, it defaults to type "submit" which means the first button in a form will have its onclick event triggered by the ENTER key. To prevent this from happening, simply assign type="button" to the button, and enter key will no longer affect it.

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();
  } 
});

How to trigger button click when press enter key outside of input controls

Just make sure that the autocomplete element isn't the source of the enter press. From the demo you give in your question, this will work. However, if it is slightly different in your use case, you may need to adjust the class name or selector to make sure it is preventing the correct target element

$(document).keypress(function (event) {       if (event.keyCode === 13 && !$(event.target).hasClass("autocomplete")) {           $("#btnSearch").click();           alert('btnSearchClick');       }  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><input type="text" id="input1" /><input type="checkbox" id="input2" /><input type="text" class="autocomplete" id="input3" />
<button type="button" id="btnSearch">Search</button>

Click event triggered by enter key

<input type=submit> in the form gets the automatic Enter Key behavior. This is known as an implicit form submission.

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());
}

Press enter in textbox to and execute button command

You could register to the KeyDown-Event of the Textbox, look if the pressed key is Enter and then execute the EventHandler of the button:

private void buttonTest_Click(object sender, EventArgs e)
{
    MessageBox.Show("Hello World");
}

private void textBoxTest_KeyDown(object sender, KeyEventArgs e)
{
    if (e.KeyCode == Keys.Enter)
    {
        buttonTest_Click(this, new EventArgs());
    }
}

---

Related Topics