Enter triggers button click

Question

I have a page with two buttons  One is a  lt button gt  element and the other is a  lt input type  submit  gt   The buttons appear on the page in that order  If I m in a text field anywhere in the form and press  lt Enter gt   the button element s click event is triggered  I assume that s because the button element sits first   I can t find anything that looks like a reliable way of setting the default button  nor do I necessarily want to at this point  In the absence of anything better  I ve captured a keypress anywhere on the form and  if it was the  lt Enter gt  key that was pressed  I m just negating it      form   keypress  function  e       var code   e keyCode    e which     if  code     13         e preventDefault        return false            As far as I can tell so far  it seems to be working  but it feels incredibly ham-fisted   Does anyone know of a more sophisticated technique for doing this   Similarly  are there any pitfalls to this solution that I m just not aware of   Thanks

User · Answer

It is important to read the HTML specifications to truly understand what behavior is to be expected:

The HTML5 spec explicitly states what happens in implicit submissions:

A form element's default button is the first submit button in tree order whose form owner is that form element.

If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the "enter" key while a text field is focused implicitly submits the form), then doing so for a form whose default button has a defined activation behavior must cause the user agent to run synthetic click activation steps on that default button.

This was not made explicit in the HTML4 spec, however browsers have already been implementing what is described in the HTML5 spec (which is why it's included explicitly).

Edit to add:

The simplest answer I can think of is to put your submit button as the first [type="submit"] item in the form, add padding to the bottom of the form with css, and absolutely position the submit button at the bottom where you'd like it.

User · Answer

Pressing enter in a form s text field will  by default  submit the form  If you don t want it to work that way you have to capture the enter key press and consume it like you ve done  There is no way around this  It will work this way even if there is no button present in the form

User · Answer

I don t think you need javascript or CSS to fix this   According to the html 5 spec for buttons a button with no type attribute is treated the same as a button with its type set to  submit   i e  as a button for submitting its containing form  Setting the button s type to  button  should prevent the behaviour you re seeing   I m not sure about browser support for this  but the same behaviour was specified in the html 4 01 spec for buttons so I expect it s pretty good

User · Answer

Using   lt button type  button  gt Whatever lt  button gt    should do the trick   The reason is because a button inside a form has its type implicitly set to submit  As zzzzBoz says  the Spec says that the first button or input with type  submit  is what is triggered in this situation  If you specifically set type  button   then it s removed from consideration by the browser

User · Answer

You can use javascript to block form submission until the appropriate time   A very crude example    lt form onsubmit  return false   id  frmNoEnterSubmit  action  index html  gt        lt input type  text  name  txtTest    gt        lt input type  button  value  Submit           onclick  document forms  frmNoEnterSubmit   onsubmit     document forms  frmNoEnterSubmit   submit       gt    lt  form gt    Pressing enter will still trigger the form to submit  but the javascript will keep it from actually submitting  until you actually press the button

User · Answer

Where ever you use a  lt button gt  element by default it considers that button type  submit  so if you define the button type  button  then it won t consider that  lt button gt  as submit button

User · Answer

My situation has two Submit buttons within the form element  Update and Delete   The Delete button deletes an image and the Update button updates the database with the text fields in the form   Because the Delete button was first in the form  it was the default button on Enter key  Not what I wanted  The user would expect to be able to hit Enter after changing some text fields   I found my answer to setting the default button here    lt form action   action page php  method  get  id  form1  gt    First name   lt input type  text  name  fname  gt  lt br gt    Last name   lt input type  text  name  lname  gt  lt br gt   lt  form gt   lt button type  submit  form  form1  value  Submit  gt Submit lt  button gt    Without using any script  I defined the form that each button belongs to using the  lt button gt  form  bla  attribute   I set the Delete button to a form that doesn t exist and set the Update button I wanted to trigger on the Enter key to the form that the user would be in when entering text   This is the only thing that has worked for me so far

User · Answer

I added a button of type  submit  as first element of the form and made it invisible  width 0 height 0 padding 0 margin 0 border-style none font-size 0    Works like a refresh of the site  i e  I don t do anything when the button is pressed except that the site is loaded again  For me works fine

User · Answer

I would do it like the following  In the handler for the onclick event of the button  not submit  check the event object s keycode  If it is  enter  I would return false

User · Answer

You can do something like this   bind your event into a common function and call the event either with keypress or button click    for example   function callME event       alert  Hi            button   on  click  callME       input    keypress function event     if  event which    13        callME event

User · Answer

By pressing  Enter  on focused  lt input type  text  gt  you trigger  click  event on the first positioned element   lt button gt  or  lt input type  submit  gt   If you press  Enter  in  lt textarea gt   you just make a new text line   See the example here   Your code prevents to make a new text line in  lt textarea gt   so you have to catch key press only for  lt input type  text  gt    But why do you need to press Enter in text field  If you want to submit form by pressing  Enter   but the  lt button gt  must stay the first in the layout  just play with the markup  put the  lt input type  submit  gt  code before the  lt button gt  and use CSS to save the layout you need   Catching  Enter  and saving markup      input type  text     keypress function  e        var code   e keyCode    e which      if  code     13      e preventDefault           form   submit      add this  if you want to submit form by pressing  Enter

User · Answer

Dom example     lt button onclick  anotherFoo    gt  Add new row lt  button gt     lt input type  text  name  xxx  onclick  foo event   gt    javascript  function foo event      if event which    13    event keyCode    13     for crossbrowser           event preventDefault       this code prevents other buttons triggers use this         do stuff         function anotherFoo         stuffs      if you don t use preventDefault    other buttons will triggered

[javascript] Enter triggers button click

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to forms

Examples related to enter