Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Prevent user hitting Enter except Textarea

I have a fairly complex form which has multiple stages with many different text fields and text areas. The environment it is used within used barcodes which hit enter by default, and that is by choice as they scan a multitude of products using them so turning the enter function off has become a no-go.

I am using a form wizard script which handles client-side validation during the input stage. This script is interrupted by the enter key being hit during filling out the form and refuses to submit until the page is refreshed.

<a href="javascript:;" class="btn green button-submit">Submit <i class="m-icon-swapright m-icon-white"></i></a>

I have the following code which works to prevent enter on the form and allows the form to submit when the link above is clicked.

$(window).keydown(function (event) {
    if (event.keyCode == 13) {
        event.preventDefault();
        return false;
    }
});

However this prevents enter being used within textarea. I did a bit of research and tried using the is() operator from jQuery

$(document).ready(function () {
    $(window).keydown(function (event) {
        if (event.keyCode == 13 && !event.is("textarea")) {
            event.preventDefault();
            return false;
        }
    });
});

This doesn't work, it fails to prevent the enter key in inputs and stalls the form from submitting as it did prior.

Finally this is the javascript that handles submitting the form if validation passes on the form

$('#form_wizard_1 .button-submit').click(function () {
    // Can put more onsubmit processing here
    document.getElementById('submit_form').submit();
}).hide();

Can anyone suggest how I can prevent the enter key on all inputs EXCEPT for textareas. I don't pretend to be a JavaScript developer, although I am trying to learn as I go. The following are articles I have read and either attempted to adapt code or failed to understand how it would apply to me in the correct manner:

Prevent users from submitting a form by hitting Enter

Prevent Users from submitting form by hitting enter #2

disable enter key on page, but NOT in textarea


*In regards to the last link, I need a global resolution that automatically prevents it on all textareas that may exist within the form.

As always, thank you for your assistance.

like image 626
Tarquin Avatar asked Apr 01 '15 04:04

Tarquin


People also ask

How do I stop enter form from enter key?

To prevent form submission when the Enter key is pressed in React, use the preventDefault() method on the event object, e.g. event. preventDefault() . The preventDefault method prevents the browser from refreshing the page when the form is submitted.

How avoid enter key submit in PHP?

Disallow enter key anywhereon("keydown", "form", function(event) { return event. key != "Enter"; });

How do you prevent form submit on Enter in Javascript?

This can be solved by writing the <input type='button'/> with javascript, and then put an <input type='submit' /> within a <noscript> tag. The drawback of this approach is that for javascript-disabled browsers you will then have form submissions on ENTER.


1 Answers

Use !$(event.target).is("textarea")
Also use event.which (instead of event.keyCode; jQuery normalizes it for xBrowser) or use event.key

jQuery(function($) { // DOM ready

  $('form').on('keydown', function(ev) {
    if (ev.key === "Enter" && !$(ev.target).is('textarea')) {
      ev.preventDefault();
      console.log("ENTER-KEY PREVENTED ON NON-TEXTAREA ELEMENTS");
    }
  });

});
<form>
  <input name="inp" placeholder="Click here and hit Enter" type="text">
  <textarea name="txa" placeholder="Click here and hit Enter"></textarea>
  <input type="submit">
</form>

<script src="//code.jquery.com/jquery-3.1.0.js"></script>
like image 93
Roko C. Buljan Avatar answered Oct 19 '22 17:10

Roko C. Buljan