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

Question

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    lt input type  text  id  txtSearch    gt   lt input type  button  id  btnSearch  value  Search  onclick  doSomething       gt

User · Answer

To add a completely plain JavaScript solution that addressed @icedwater's issue with form submission, here's a complete solution with form.

NOTE: This is for "modern browsers", including IE9+. The IE8 version isn't much more complicated, and can be learned here.

Fiddle: https://jsfiddle.net/rufwork/gm6h25th/1/

HTML

<body>
    <form>
        <input type="text" id="txt" />
        <input type="button" id="go" value="Click Me!" />
        <div id="outige"></div>
    </form>
</body>

JavaScript

// The document.addEventListener replicates $(document).ready() for
// modern browsers (including IE9+), and is slightly more robust than `onload`.
// More here: https://stackoverflow.com/a/21814964/1028230
document.addEventListener("DOMContentLoaded", function() {
    var go = document.getElementById("go"),
        txt = document.getElementById("txt"),
        outige = document.getElementById("outige");

    // Note that jQuery handles "empty" selections "for free".
    // Since we're plain JavaScripting it, we need to make sure this DOM exists first.
    if (txt && go)    {
        txt.addEventListener("keypress", function (e) {
            if (event.keyCode === 13)   {
                go.click();
                e.preventDefault(); // <<< Most important missing piece from icedwater
            }
        });

        go.addEventListener("click", function () {
            if (outige) {
                outige.innerHTML += "Clicked!<br />";
            }
        });
    }
});

User · Answer

Try it    lt input type  text  id  txtSearch   gt   lt input type  button  id  btnSearch  Value  Search   gt    lt script gt                  window onload   function          document getElementById  txtSearch   onkeypress   function searchKeyPress event            if  event keyCode    13                document getElementById  btnSearch   click                          document getElementById  btnSearch   onclick  doSomething     lt  script gt

User · Answer

One basic trick you can use for this that I haven t seen fully mentioned   If you want to do an ajax action  or some other work on Enter but don t want to actually submit a form you can do this    lt form onsubmit  Search     action  javascript void 0    gt       lt input type  text  id  searchCriteria  placeholder  Search Criteria   gt       lt input type  button  onclick  Search     value  Search  id  searchBtn   gt   lt  form gt    Setting action  javascript void 0    like this is a shortcut for preventing default behavior essentially   In this case a method is called whether you hit enter or click the button and an ajax call is made to load some data

User · Answer

For those who may like brevity and modern js approach   input addEventListener  keydown    e    gt   if  e keyCode    13  doSomething        where input is a variable containing your input element

User · Answer

event returnValue   false   Use it when handling the event or in the function your event handler calls   It works in Internet Explorer and Opera at least

User · Answer

For modern JS keyCode is deprecated  use key instead   searchInput onkeyup   function  e        if  e key      Enter             searchBtn click

User · Answer

Use keypress and event key      quot Enter quot  with modern JS  const textbox   document getElementById  quot txtSearch quot    textbox addEventListener  quot keypress quot   function onEvent event        if  event key      quot Enter quot             document getElementById  quot btnSearch quot   click               Mozilla Docs Supported Browsers

User · Answer

Since no one has used addEventListener yet  here is my version  Given the elements   lt input type    quot text quot  id    quot txt quot    gt   lt input type    quot button quot  id    quot go quot    gt   I would use the following  var go   document getElementById  quot go quot    var txt   document getElementById  quot txt quot     txt addEventListener  quot keypress quot   function event        event preventDefault        if  event keyCode    13          go click         This allows you to change the event type and action separately while keeping the HTML clean   Note that it s probably worthwhile to make sure this is outside of a  lt form gt  because when I enclosed these elements in them pressing Enter submitted the form and reloaded the page  Took me a few blinks to discover   Addendum  Thanks to a comment by  ruffin  I ve added the missing event handler and a preventDefault to allow this code to  presumably  work inside a form as well   I will get around to testing this  at which point I will remove the bracketed content

User · Answer

Then just code it in    lt input type    text         id    txtSearch          onkeydown    if  event keyCode    13                          document getElementById  btnSearch   click          gt    lt input type    button         id    btnSearch         value    Search         onclick    doSomething       gt

User · Answer

In modern  undeprecated  without keyCode or onkeydown  Javascript    lt input onkeypress  if event key     Enter    console log  Test     gt

User · Answer

To trigger a search every time the enter key is pressed  use this     document  keypress function event        var keycode    event keyCode   event keyCode   event which       if  keycode     13                 btnSearch   click

User · Answer

onkeydown  javascript if  event which    event keyCode  if   event which    13      event keyCode    13    document getElementById  btnSearch   click          This is just something I have from a somewhat recent project    I found it on the net  and I have no idea if there s a better way or not in plain old JavaScript

User · Answer

For jQuery mobile  I had to do      id of textbox   live  quot keyup quot   function event        if event keyCode     13            id of button   click

User · Answer

This also might help  a small JavaScript function  which works fine    lt script type  text javascript  gt  function blank a    if a value    a defaultValue  a value          function unblank a    if a value        a value   a defaultValue     lt  script gt    lt input type  text  value  email goes here  onfocus  blank this   onblur  unblank this     gt    I know this question is solved  but I just found something  which can be helpful for others

User · Answer

Figured this out    lt input type  text  id  txtSearch  onkeypress  return searchKeyPress event      gt   lt input type  button  id  btnSearch  Value  Search  onclick  doSomething       gt    lt script gt  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     lt  script gt

User · Answer

I have developed custom javascript to achieve this feature by just adding class  Example   lt button type  button  class  ctrl-p  gt Custom Print lt  button gt   Here Check it out Fiddle   -- or --  check out running example https   stackoverflow com a 58010042 6631280     Note  on current logic  you need to press Ctrl     Enter

User · Answer

Make the button a submit element  so it ll be automatic    lt input type    submit         id    btnSearch         value    Search         onclick    return doSomething       gt    Note that you ll need a  lt form gt  element containing the input fields to make this work  thanks Sergey Ilinsky    It s not a good practice to redefine standard behaviour  the Enter key should always call the submit button on a form

User · Answer

These day the change event is the way  document getElementById  quot txtSearch quot   addEventListener  change            gt  document getElementById  quot btnSearch quot   click

User · Answer

This onchange attempt is close  but misbehaves with respect to browser back then forward   on Safari 4 0 5 and Firefox 3 6 3   so ultimately  I wouldn t recommend it    lt input type  text  id  txtSearch  onchange  doSomething       gt   lt input type  button  id  btnSearch  value  Search  onclick  doSomething       gt

User · Answer

In Angular2    keyup enter   doSomething      If you don t want some visual feedback in the button  it s a good design to not reference the button but rather directly invoke the controller   Also  the id isn t needed - another NG2 way of separating between the view and the model

User · Answer

Although  I m pretty sure that as long as there is only one field in the form and one submit button  hitting enter should submit the form  even if there is another form on the page   You can then capture the form onsubmit with js and do whatever validation or callbacks you want

User · Answer

In plain JavaScript   if  document layers      document captureEvents Event KEYDOWN      document onkeydown   function  evt      var keyCode   evt    evt which   evt which   evt keyCode    event keyCode    if  keyCode    13           For Enter         Your function here        if  keyCode    27           For Escape         Your function here      else       return true           I noticed that the reply is given in jQuery only  so I thought of giving something in plain JavaScript as well

User · Answer

This is a solution for all the YUI lovers out there   Y on  keydown   function       if event keyCode    13       Y one   id of button   simulate  click             id of textbox      In this special case I did have better results using YUI for triggering DOM objects that have been injected with button functionality - but this is another story

User · Answer

To do it with jQuery       txtSearch   on  keyup   function  event        if  event keyCode  13                btnSearch   get 0  click                To do it with normal JavaScript   document getElementById  txtSearch   addEventListener  keyup   function  event        if  event keyCode  13             document getElementById   btnSearch   click

User · Answer

Short working pure JS txtSearch onkeydown  e   gt   e key   quot Enter quot     btnSearch click     1   x000D   x000D  txtSearch onkeydown  e   gt   e key   Enter     btnSearch click     1  function doSomething       console log        x000D   lt input type  text  id  txtSearch    gt   lt input type  button  id  btnSearch  value  Search  onclick  doSomething       gt  x000D   x000D   x000D

User · Answer

Nobody noticed the html attibute  accesskey  which is available since a while   This is a no javascript way to keyboard shortcuts stuffs     The accesskey attributes shortcuts on MDN  Intented to be used like this  The html attribute itself is enough  howewer we can change the placeholder or other indicator depending of the browser and os  The script is a untested scratch approach to give an idea  You may want to use a browser library detector like the tiny bowser   x000D   x000D  let client   navigator userAgent toLowerCase    x000D      isLinux   client indexOf  linux    gt  -1  x000D      isWin   client indexOf  windows    gt  -1  x000D      isMac   client indexOf  apple    gt  -1  x000D      isFirefox   client indexOf  firefox    gt  -1  x000D      isWebkit   client indexOf  webkit    gt  -1  x000D      isOpera   client indexOf  opera    gt  -1  x000D      input   document getElementById  guestInput    x000D   x000D  if isFirefox    x000D     input setAttribute  placeholder    ALT SHIFT Z    x000D    else if  isWin    x000D     input setAttribute  placeholder    ALT Z    x000D    else if  isMac    x000D    input setAttribute  placeholder    CTRL ALT Z    x000D    else if  isOpera    x000D    input setAttribute  placeholder    SHIFT ESCAPE- gt Z    x000D    else   Point me to operate      x000D   lt input type  text  id  guestInput  accesskey  z  placeholder  Acces shortcut   gt  lt  input gt  x000D   x000D   x000D

User · Answer

This in-case you want also diable the enter button from Posting to server and execute the Js script     lt input type  text  id  txtSearch  onkeydown  if  event keyCode    13    document getElementById  btnSearch   click    return false     gt   lt input type  button  id  btnSearch  value  Search  onclick  doSomething       gt

User · Answer

In jQuery  you can use event which  13  If you have a form  you could use     formid   submit    with the correct event listeners added to the submission of said form     x000D   x000D      textfield   keyup function event   x000D     if event which  13   x000D             submit   click    x000D       x000D      x000D      submit   click function e   x000D     if     textfield   val   trim   length   x000D        alert  Submitted     x000D       else   x000D      alert  Field can not be empty     x000D       x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt label for  textfield  gt  x000D  Enter Text  lt  label gt  x000D   lt input id  textfield  type  text  gt  x000D   lt button id  submit  gt  x000D  Submit x000D   lt  button gt  x000D   x000D   x000D

User · Answer

document onkeypress   function  e     e   e    window event   var charCode    typeof e which     number     e which   e keyCode   if  charCode    13                Do something here         printResult               Heres my two cents  I am working on an app for Windows 8 and want the button to register a click event when I press the Enter button  I am doing this in JS  I tried a couple of suggestions  but had issues  This works just fine

User · Answer

In jQuery  the following would work       id of textbox   keyup function event        if  event keyCode     13                id of button   click                 x000D   x000D      pw   keyup function event    x000D      if  event keyCode     13    x000D              myButton   click    x000D        x000D      x000D   x000D      myButton   click function     x000D    alert  Button code executed     x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D  Username  lt input id  username  type  text  gt  lt br gt  x000D  Password  amp nbsp  lt input id  pw  type  password  gt  lt br gt  x000D   lt button id  myButton  gt Submit lt  button gt  x000D   x000D   x000D    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                 x000D   x000D  document getElementById  pw   x000D       addEventListener  keyup   function event    x000D      event preventDefault    x000D      if  event keyCode     13    x000D          document getElementById  myButton   click    x000D        x000D      x000D   x000D  function buttonCode   x000D    x000D    alert  Button code executed     x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D  Username  lt input id  username  type  text  gt  lt br gt  x000D  Password  amp nbsp  lt input id  pw  type  password  gt  lt br gt  x000D   lt button id  myButton  onclick  buttonCode    gt Submit lt  button gt  x000D   x000D   x000D

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

HTML

JavaScript

Examples related to javascript

Examples related to htmlbutton