How to trigger HTML button when you press Enter in textbox

Question

So the code that I have so far is    lt fieldset id  LinkList  gt       lt input type  text  id  addLinks  name  addLinks  value  http     gt       lt input type  button  id  linkadd  name  linkadd  value  add  gt   lt  fieldset gt    It is not in a  lt form gt  and is just as it is within a  lt div gt    However when I type something into the textbox called  addLinks  I want the user to be able to press Enter and trigger the  linkadd  button which will then run a JavaScript function  How can I do this  Thanks  Edit  I did find this code  but it doesnt seem to work       addLinks   keyup function event       if event keyCode    13               linkadd   click

User · Answer

Do not use Javascript for this  Modern HTML pages automatically allow a form s submit button to submit the page with the ENTER RETURN key when any form field control in the web page has focus by the user  autofocus attribute is set on a form field or button  or user tab s into any of the form fields  So instead of Javascripting this  an easier solution is to add tabindex 0 on your form fields and button inside a form element then autofocus on the first input control  The user can then press  quot ENTER quot  to submit the form at any point as they enter data   lt form id  quot buttonform2 quot  name  quot buttonform2 quot  action  quot   quot  method  quot get quot  role  quot form quot  gt     lt label for  quot username1 quot  gt Username lt  label gt     lt input type  quot text quot  id  quot username1 quot  name  quot username quot  value  quot  quot  size  quot 20 quot  maxlength  quot 20 quot  title  quot Username quot  tabindex  quot 0 quot  autofocus  quot autofocus quot    gt     lt label for  quot password1 quot  gt Password lt  label gt     lt input type  quot password quot  id  quot password1 quot  name  quot password quot  size  quot 20 quot  maxlength  quot 20 quot  value  quot  quot  title  quot Password quot  tabindex  quot 0 quot  role  quot textbox quot  aria-label  quot Password quot    gt     lt button id  quot button2 quot  name  quot button2 quot  type  quot submit quot  value  quot submit quot  form  quot buttonform2 quot  title  quot Submit quot  tabindex  quot 0 quot  role  quot button quot  aria-label  quot Submit quot  gt Submit lt  button gt   lt  form gt

User · Answer

document  ready function            TextBoxId   keypress function e         if e keyCode  13            linkadd   click

User · Answer

Replace the button with a submit Be progressive  make sure you have a server side version Bind your JavaScript to the submit handler of the form  not the click handler of the button   Pressing enter in the field will trigger form submission  and the submit handler will fire

User · Answer

It works when input type  button  is replaced with input type  submit  for the default button which needs to be triggered

User · Answer

I am using a kendo button  This worked for me     lt div class  form-group  id  indexform  gt       lt div class  col-md-8  gt               lt div class  row  gt                   lt b gt Search By Customer Name  Customer Number  lt  b gt                   Html TextBox  txtSearchString   null  new   style    width 400px    autofocus    autofocus                       Html Kendo   Button                        Name  btnSearch                        HtmlAttributes new   type    button    class    k-primary                          Content  Search                        Events ev   gt  ev Click  onClick                  lt  div gt       lt  div gt   lt  div gt   lt script gt  var validator       indexform   kendoValidator   data  kendoValidator              status       status        indexform   keyup function  event        if  event keyCode    13                btnSearch   click               lt  script gt

User · Answer

It is  yeah  2021  And I believe this still holds true   DO NOT USE keypress  keypress event is not triggered when the user presses a key that does not produce any character  such as Tab  Caps Lock  Delete  Backspace  Escape  left  amp  right Shift  function keys F1 - F12     keypress event Mozilla Developer Network The keypress event is fired when a key is pressed down  and that key normally produces a character value  Use input instead    It has been deprecated    keypress event UI Events  W3C working draft published on November 8  2018    NOTE   The keypress event is traditionally associated with detecting a character value rather than a physical key  and might not be available on all keys in some configurations  WARNING   The keypress event type is defined in this specification for reference and completeness  but this specification deprecates the use of this event type  When in editing contexts  authors can subscribe to the beforeinput event instead     DO NOT USE KeyboardEvent keyCode  It has been deprecated    KeyboardEvent keyCode Mozilla Developer Network Deprecated   This feature is no longer recommended  Though some browsers might still support it  it may have already been removed from the relevant web standards  may be in the process of being dropped  or may only be kept for compatibility purposes  Avoid using it  and update existing code if possible  see the compatibility table at the bottom of this page to guide your decision  Be aware that this feature may cease to work at any time    What should I use then   The good practice     Make sure this code gets executed after the DOM is loaded  document querySelector  quot  addLinks quot   addEventListener  quot keyup quot   event   gt        if event key      quot Enter quot   return     Use   key  instead      document querySelector  quot  linkadd quot   click       Things you want to do      event preventDefault       No need to  return false

User · Answer

This should do it  I am using jQuery you can write plain javascript  Replace sendMessage   with your functionality       addLinks   keypress function e        if  e which    13            sendMessage            e preventDefault

User · Answer

I found w3schools com howto  their try me page is at the following   https   www w3schools com howto tryit asp filename tryhow js trigger button enter  This worked in my regular browser but did not work in my php app which uses the built in php browser   After toying a bit I came up with the following pure JavaScript alternative that works for my situation and should work in every other situation       function checkForEnterKey            if  event keyCode     13                event preventDefault                document getElementById  myBtn   click                         function buttonClickEvent                 alert  The button has been clicked             HTML Press the enter key inside the textbox to activate the button        lt br   gt       lt input id  myInput  onkeyup  checkForEnterKey this value   gt       lt br   gt       lt button id  myBtn  onclick  buttonClickEvent    gt Button lt  button gt

User · Answer

You could add an event handler to your input like so   document getElementById  addLinks   onkeypress function e       if e keyCode  13           document getElementById  linkadd   click

User · Answer

First of all add jquery library file jquery and call it in your html head   and then Use jquery based code         id of textbox   keyup function event       if event keyCode    13               id of button   click

User · Answer

There are a js-free solution   Set type submit to the button you d like to be default and type button to other buttons  Now in the form below you can hit Enter in any input fields  and the Render button will work  despite the fact it is the second button in the form     Example        lt button id  close renderer button  class  btn btn-success              title                                                  type button gt         lt span class  glyphicon glyphicon-edit  gt   lt  span gt  Edit program      lt  button gt       lt button id  render button  class  btn btn-primary              title                                 type submit             formaction  javascript alert  Bingo      gt         lt span class  glyphicon glyphicon-send  gt   lt  span gt  Render      lt  button gt    Tested in FF24 and Chrome 35  formaction is html5 feature  but type is not

User · Answer

lt input type  text  id  input id    gt           input id   keydown function  event        if  event keyCode    13                 Call your function here or add code here

User · Answer

Based on some previous answers  I came up with this    lt form gt     lt button id  but  type  submit  gt do not click me lt  button gt     lt input type  text  placeholder  press enter  gt   lt  form gt       but   click function e      alert  button press      e preventDefault          Take a look at the Fiddle  EDIT  If you dont want to add additional html elements  you can do this with JS only          input   keyup function event            if  event keyCode     13                   button   click

[html] How to trigger HTML button when you press Enter in textbox?

Examples related to html

Examples related to jquery

Examples related to button

Examples related to input

Examples related to textbox