Skip to main content
Missing the conditional for textarea fields. The way it is, it's not creating new lines in textarea fields. I inserted the necessary code for it to work perfectly.
Source Link
NaN
  • 9.2k
  • 23
  • 87
  • 156

There are many good answers here already, I just want to contribute something from a UX perspective. Keyboard controls in forms are very important.

The question is how to disable from submission on keypress Enter. Not how to ignore Enter in an entire application. So consider attaching the handler to a form element, not the window.

Disabling Enter for form submission should still allow the following:

  1. Form submission via Enter when submit button is focused.
  2. Form submission when all fields are populated.
  3. Interaction with non-submit buttons via Enter.

This is just boilerplate but it follows all three conditions.

$('form').on('keypress', function(e) { // Register keypress on buttons. $attr = $(e.target).attr('type'); $node = e.target.nodeName.toLowerCase(); if ($attr === 'button' || $attr === 'submit' || $node === 'textarea') { return true; } // Ignore keypress if all fields are not populated. if (e.which === 13 && !fieldsArePopulated(this)) { return false; } });

There are many good answers here already, I just want to contribute something from a UX perspective. Keyboard controls in forms are very important.

The question is how to disable from submission on keypress Enter. Not how to ignore Enter in an entire application. So consider attaching the handler to a form element, not the window.

Disabling Enter for form submission should still allow the following:

  1. Form submission via Enter when submit button is focused.
  2. Form submission when all fields are populated.
  3. Interaction with non-submit buttons via Enter.

This is just boilerplate but it follows all three conditions.

$('form').on('keypress', function(e) { // Register keypress on buttons. $attr = $(e.target).attr('type'); if ($attr === 'button' || $attr === 'submit') { return true; } // Ignore keypress if all fields are not populated. if (e.which === 13 && !fieldsArePopulated(this)) { return false; } });

There are many good answers here already, I just want to contribute something from a UX perspective. Keyboard controls in forms are very important.

The question is how to disable from submission on keypress Enter. Not how to ignore Enter in an entire application. So consider attaching the handler to a form element, not the window.

Disabling Enter for form submission should still allow the following:

  1. Form submission via Enter when submit button is focused.
  2. Form submission when all fields are populated.
  3. Interaction with non-submit buttons via Enter.

This is just boilerplate but it follows all three conditions.

$('form').on('keypress', function(e) { // Register keypress on buttons. $attr = $(e.target).attr('type'); $node = e.target.nodeName.toLowerCase(); if ($attr === 'button' || $attr === 'submit' || $node === 'textarea') { return true; } // Ignore keypress if all fields are not populated. if (e.which === 13 && !fieldsArePopulated(this)) { return false; } });

Fixed typo
Source Link
png
  • 1.1k
  • 15
  • 18

There are many good answers here already, I just want to contribute something from a UX perspective. Keyboard controls in forms are very important.

The question is how to disable from submission on keypress Enter. Not how to ignore Enter in an entire application. So consider attaching the handler to a form element, not the window.

Disabling Enter for form submission should still allow the following:

  1. Form submission via Enter when submit button is focused.
  2. Form submission when all fields are populated.
  3. Interaction with non-submit buttons via Enter.

This is just boilerplate but it follows all three conditions.

$('form').on('keypress', function(e) { // Register keypress on buttons. $attr = $(e.target).attr('type'type'); if ($attr === 'button' || $attr === 'submit') { return true; } // Ignore keypress if all fields are not populated. if (e.which === 13 && !fieldsArePopulated(this)) { return false; } });

There are many good answers here already, I just want to contribute something from a UX perspective. Keyboard controls in forms are very important.

The question is how to disable from submission on keypress Enter. Not how to ignore Enter in an entire application. So consider attaching the handler to a form element, not the window.

Disabling Enter for form submission should still allow the following:

  1. Form submission via Enter when submit button is focused.
  2. Form submission when all fields are populated.
  3. Interaction with non-submit buttons via Enter.

This is just boilerplate but it follows all three conditions.

$('form').on('keypress', function(e) { // Register keypress on buttons. $attr = $(e.target).attr('type); if ($attr === 'button' || $attr === 'submit') { return true; } // Ignore keypress if all fields are not populated. if (e.which === 13 && !fieldsArePopulated(this)) { return false; } });

There are many good answers here already, I just want to contribute something from a UX perspective. Keyboard controls in forms are very important.

The question is how to disable from submission on keypress Enter. Not how to ignore Enter in an entire application. So consider attaching the handler to a form element, not the window.

Disabling Enter for form submission should still allow the following:

  1. Form submission via Enter when submit button is focused.
  2. Form submission when all fields are populated.
  3. Interaction with non-submit buttons via Enter.

This is just boilerplate but it follows all three conditions.

$('form').on('keypress', function(e) { // Register keypress on buttons. $attr = $(e.target).attr('type'); if ($attr === 'button' || $attr === 'submit') { return true; } // Ignore keypress if all fields are not populated. if (e.which === 13 && !fieldsArePopulated(this)) { return false; } });

Source Link
png
  • 1.1k
  • 15
  • 18

There are many good answers here already, I just want to contribute something from a UX perspective. Keyboard controls in forms are very important.

The question is how to disable from submission on keypress Enter. Not how to ignore Enter in an entire application. So consider attaching the handler to a form element, not the window.

Disabling Enter for form submission should still allow the following:

  1. Form submission via Enter when submit button is focused.
  2. Form submission when all fields are populated.
  3. Interaction with non-submit buttons via Enter.

This is just boilerplate but it follows all three conditions.

$('form').on('keypress', function(e) { // Register keypress on buttons. $attr = $(e.target).attr('type); if ($attr === 'button' || $attr === 'submit') { return true; } // Ignore keypress if all fields are not populated. if (e.which === 13 && !fieldsArePopulated(this)) { return false; } });