Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
46
rated 0 times [  51] [ 5]  / answers: 1 / hits: 7146  / 9 Years ago, wed, april 1, 2015, 12:00:00

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.


More From » jquery

 Answers
2

JavaScript


Use KeyboardEvent.key and Element.matches(selectors)




document.querySelector(#myForm).addEventListener(keydown, (evt) => {
if (evt.key === Enter && !evt.target.matches(textarea)) {
evt.preventDefault(); // Don't trigger form submit
console.log(ENTER-KEY PREVENTED ON NON-TEXTAREA ELEMENTS);
}
});

<form id=myForm>
<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>




jQuery


Use !$(event.target).is("textarea")

Also use Event.key, or use Event.which (instead of Event.keyCode; jQuery normalizes it for cross-browser)




jQuery(function($) { // DOM ready

$('form').on('keydown', function(ev) {
if (ev.key === Enter && !$(ev.target).is('textarea')) {
ev.preventDefault(); // Don't trigger form submit
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.6.1.js></script>




[#38221] Monday, March 30, 2015, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
masonm

Total Points: 167
Total Questions: 87
Total Answers: 103

Location: Rwanda
Member since Wed, Jun 8, 2022
2 Years ago
masonm questions
;