How to capture Enter key press

Question

In my HTML page  I had a textbox for user to input keyword for searching  When they click the search button  the JavaScript function will generate a URL and run in new window   The JavaScript function work properly when the user clicks the search button by mouse  but there is no response when the user presses the ENTER key   function searching        var keywordsStr   document getElementById  keywords   value      var cmd   http   XXX advancedsearch result asp language ENG amp     encodeURI keywordsStr      amp x 11 amp y 4       window location   cmd       lt form name  form1  method  get  gt       lt input name  keywords  type  text  id  keywords  size  50   gt       lt input type  submit  name  btn search  id  btn search  value  Search           onClick  javascript searching    return false   onKeyPress  javascript searching    return false   gt       lt input type  reset  name  btn reset  id  btn reset  value  Reset  gt   lt  form gt

User · Answer

lt form action     gt       lt input type  text  id  txtBox  name  txt  onkeypress  handle    gt   lt  form gt         lt script gt          txtBox   keypress function  e                if  e keyCode     13                    alert  Enter was pressed was presses                               return false                    lt  script gt

User · Answer

This is simple ES-6 style answer  For capturing an  enter  key press and executing some function   lt input     onPressEnter  e   gt   e keyCode     13   amp  amp  someFunc      gt

User · Answer

x000D   x000D      jquery press check by Abdelhamed Mohamed x000D   x000D   x000D        document  ready function    x000D         textarea   keydown function event   x000D          if  event keyCode    13    x000D              do something here x000D           alert  You Pres Enter    x000D            x000D             x000D          x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 12 4 jquery min js  gt  lt  script gt  x000D       lt textarea gt  lt  textarea gt  x000D   x000D   x000D

User · Answer

Use onkeypress   Check if the pressed key is enter  keyCode   13   if yes  call the searching   function   HTML   lt input name  keywords  type  text  id  keywords  size  50   onkeypress  handleKeyPress event   gt    JAVASCRIPT  function handleKeyPress e    var key e keyCode    e which    if  key  13        searching            Here is a snippet showing it in action    x000D   x000D  document getElementById  msg1   innerHTML    Default   x000D  function handle e   x000D   document getElementById  msg1   innerHTML    Trigger   x000D   var key e keyCode    e which  x000D    if  key  13   x000D       document getElementById  msg1   innerHTML    HELLO    x000D      x000D    x000D   lt input type  text  name  box22  value  please  onkeypress  handle event    gt  x000D   lt div id  msg1  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Small bit of generic jQuery for you       div search-box input type text    on  keydown   function  e        if  e which    13              this  parent   find  input type submit    trigger  click            return false               This works on the assumes that the textbox and submit button are wrapped on the same div  works a treat with multiple search boxes on a page

User · Answer

Use an onsubmit attribute on the form tag rather than onclick on the submit

User · Answer

You can use javascript   ctl attachEvent  onkeydown   function event             try               if  event keyCode    13                    FieldValueChanged ctl id  ctl value                             false            catch  e               return true

User · Answer

Try this      HTML inline  onKeydown  Javascript  if  event keyCode  13  fnsearch     or onkeypress  Javascript  if  event keyCode  13  fnsearch       JavaScript   lt script gt  function fnsearch        alert  you press enter       lt  script gt

User · Answer

You need to create a handler for the onkeypress action     HTML   lt input name  keywords  type  text  id  keywords  size  50  onkeypress  handleEnter this  event     gt    JS  function handleEnter inField  e        var charCode         Get key code  support for all browsers      if e  amp  amp  e which                charCode   e which            else if window event                e   window event          charCode   e keyCode             if charCode    13                 Call your submit function

User · Answer

Form approach As scoota269 says  you should use onSubmit instead  cause pressing enter on a textbox will most likey trigger a form submit  if inside a form   lt form action  quot   quot  onsubmit  quot handle quot  gt       lt input type  quot text quot  name  quot txt quot    gt   lt  form gt    lt script gt      function handle e           e preventDefault       Otherwise the form will be submitted          alert  quot FORM WAS SUBMITTED quot           lt  script gt   Textbox approach If you want to have an event on the input-field then you need to make sure your handle   will return false  otherwise the form will get submitted   lt form action  quot   quot  gt       lt input type  quot text quot  name  quot txt quot  onkeypress  quot handle event  quot    gt   lt  form gt    lt script gt      function handle e           if e keyCode     13               e preventDefault       Ensure it is only this code that runs              alert  quot Enter was pressed was presses quot                     lt  script gt

User · Answer

Use event key instead of event keyCode   function onEvent event        if  event key      Enter                Submit form            Mozilla Docs  Supported Browsers

[javascript] How to capture Enter key press?

Examples related to javascript

Examples related to textbox

Examples related to keypress

Examples related to dom-events

Examples related to onkeypress