Intercept Arrow key and send Enter instead - javascript

Using pure JS I'd like to intercept the arrow key and dispatch the enter key in its place to submit a form. The enter key is being dispatched it's just not behaving like the enter key does when you physically push it on the keyboard, I know I could just use click() to do the same thing its just really bothering me that I cant get the enter key to work how I expect..
See fiddle
var input = document.getElementById('name');
input.addEventListener('keydown', e => handleArrowNavigation(e));
function handleArrowNavigation(event) {
if (event.key === "ArrowRight") {
//send enter to expand
triggerEnterKey(event.target.id);
}
}
function triggerEnterKey(elementId) {
var element = document.getElementById(elementId);
if (element) {
const keyEvent = new KeyboardEvent("keydown", {
key: "Enter",
//code: "Enter",
//keyCode: 13,
//charCode: 13,
//type: "keydown",
//isTrusted: true,
//defaultPrevented: true,
//currentTarget: element,
//view: window,
//bubbles: true
});
var dispatched = element.dispatchEvent(keyEvent);
console.log("enter key triggered on element: " + element.id);
console.log("event dispatched: ", dispatched);
//element.click();//click works
}
}
<form action="javascript: alert('form submitted.')">
<p>
If you hit enter while focus is on the input you will get an alert as expected. If you click the right arrow key I'd like it to trigger the enter key and do what enter does. (right arrow key should trigger form submission alert)
</p>
<input type="text" id="name" />
<input type="submit" id="submit" />
</form>

Actually just figured this out... You can't.
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
Note: Manually firing an event does not generate the default action associated with that event. For example, manually firing a key event does not cause that letter to appear in a focused text input. In the case of UI events, this is important for security reasons, as it prevents scripts from simulating user actions that interact with the browser itself.

Related

when we write multiple values in taginputs and press enter, form submits. How to prevent this? [duplicate]

I have a survey on a website, and there seems to be some issues with the users hitting enter (I don't know why) and accidentally submitting the survey (form) without clicking the submit button. Is there a way to prevent this?
I'm using HTML, PHP 5.2.9, and jQuery on the survey.
You can use a method such as
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
In reading the comments on the original post, to make it more usable and allow people to press Enter if they have completed all the fields:
function validationFunction() {
$('input').each(function() {
...
}
if(good) {
return true;
}
return false;
}
$(document).ready(function() {
$(window).keydown(function(event){
if( (event.keyCode == 13) && (validationFunction() == false) ) {
event.preventDefault();
return false;
}
});
});
Disallow enter key anywhere
If you don't have a <textarea> in your form, then just add the following to your <form>:
<form ... onkeydown="return event.key != 'Enter';">
Or with jQuery:
$(document).on("keydown", "form", function(event) {
return event.key != "Enter";
});
This will cause that every key press inside the form will be checked on the key. If it is not Enter, then it will return true and anything continue as usual. If it is Enter, then it will return false and anything will stop immediately, so the form won't be submitted.
The keydown event is preferred over keyup as the keyup is too late to block form submit. Historically there was also the keypress, but this is deprecated, as is the KeyboardEvent.keyCode. You should use KeyboardEvent.key instead which returns the name of the key being pressed. When Enter is checked, then this would check 13 (normal enter) as well as 108 (numpad enter).
Note that $(window) as suggested in some other answers instead of $(document) doesn't work for keydown/keyup in IE<=8, so that's not a good choice if you're like to cover those poor users as well.
Allow enter key on textareas only
If you have a <textarea> in your form (which of course should accept the Enter key), then add the keydown handler to every individual input element which isn't a <textarea>.
<input ... onkeydown="return event.key != 'Enter';">
<select ... onkeydown="return event.key != 'Enter';">
...
To reduce boilerplate, this is better to be done with jQuery:
$(document).on("keydown", ":input:not(textarea)", function(event) {
return event.key != "Enter";
});
If you have other event handler functions attached on those input elements, which you'd also like to invoke on enter key for some reason, then only prevent event's default behavior instead of returning false, so it can properly propagate to other handlers.
$(document).on("keydown", ":input:not(textarea)", function(event) {
if (event.key == "Enter") {
event.preventDefault();
}
});
Allow enter key on textareas and submit buttons only
If you'd like to allow enter key on submit buttons <input|button type="submit"> too, then you can always refine the selector as below.
$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {
// ...
});
Note that input[type=text] as suggested in some other answers doesn't cover those HTML5 non-text inputs, so that's not a good selector.
Section 4.10.22.2 Implicit submission of the W3C HTML5 spec says:
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.
Note: Consequently, if the default button is disabled, the form is not submitted when such an implicit submission mechanism is used. (A button has no activation behavior when disabled.)
Therefore, a standards-compliant way to disable any implicit submission of the form is to place a disabled submit button as the first submit button in the form:
<form action="...">
<!-- Prevent implicit submission of the form -->
<button type="submit" disabled style="display: none" aria-hidden="true"></button>
<!-- ... -->
<button type="submit">Submit</button>
</form>
One nice feature of this approach is that it works without JavaScript; whether or not JavaScript is enabled, a standards-conforming web browser is required to prevent implicit form submission.
If you use a script to do the actual submit, then you can add "return false" line to the onsubmit handler like this:
<form onsubmit="return false;">
Calling submit() on the form from JavaScript will not trigger the event.
I had to catch all three events related to pressing keys in order to prevent the form from being submitted:
var preventSubmit = function(event) {
if(event.keyCode == 13) {
console.log("caught ya!");
event.preventDefault();
//event.stopPropagation();
return false;
}
}
$("#search").keypress(preventSubmit);
$("#search").keydown(preventSubmit);
$("#search").keyup(preventSubmit);
You can combine all the above into a nice compact version:
$('#search').bind('keypress keydown keyup', function(e){
if(e.keyCode == 13) { e.preventDefault(); }
});
Use:
$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
if(e.keyCode == 13) {
e.preventDefault();
return false;
}
});
This solution works on all forms on a website (also on forms inserted with Ajax), preventing only Enters in input texts. Place it in a document ready function, and forget this problem for a life.
Instead of preventing users from pressing Enter, which may seem unnatural, you can leave the form as is and add some extra client-side validation: When the survey is not finished the result is not sent to the server and the user gets a nice message telling what needs to be finished to complete the form. If you are using jQuery, try the Validation plugin:
http://docs.jquery.com/Plugins/Validation
This will require more work than catching the Enter button, but surely it will provide a richer user experience.
I can't comment yet, so I'll post a new answer
Accepted answer is ok-ish, but it wasn't stopping submit on numpad enter. At least in current version of Chrome. I had to alter the keycode condition to this, then it works.
if(event.keyCode == 13 || event.keyCode == 169) {...}
A nice simple little jQuery solution:
$("form").bind("keypress", function (e) {
if (e.keyCode == 13) {
return false;
}
});
A completely different approach:
The first <button type="submit"> in the form will be activated on pressing Enter.
This is true even if the button is hidden with style="display:none;
The script for that button can return false, which aborts the submission process.
You can still have another <button type=submit> to submit the form. Just return true to cascade the submission.
Pressing Enter while the real submit button is focussed will activate the real submit button.
Pressing Enter inside <textarea> or other form controls will behave as normal.
Pressing Enter inside <input> form controls will trigger the first <button type=submit>, which returns false, and thus nothing happens.
Thus:
<form action="...">
<!-- insert this next line immediately after the <form> opening tag -->
<button type=submit onclick="return false;" style="display:none;"></button>
<!-- everything else follows as normal -->
<!-- ... -->
<button type=submit>Submit</button>
</form>
It is my solution to reach the goal,
it is clean and effective.
$('form').submit(function () {
if ($(document.activeElement).attr('type') == 'submit')
return true;
else return false;
});
You can also use javascript:void(0) to prevent form submission.
<form action="javascript:void(0)" method="post">
<label for="">Search</label>
<input type="text">
<button type="sybmit">Submit</button>
</form>
<form action="javascript:void(0)" method="post">
<label for="">Search</label>
<input type="text">
<button type="sybmit">Submit</button>
</form>
Not putting a submit button could do. Just put a script to the input (type=button) or add eventListener if you want it to submit the data in the form.
Rather use this
<input type="button" onclick="event.preventDefault();this.closest('form').submit();">
than using this
<input type="submit">
Note: onclick is needed here to actually submit the form when clicked. By default, type="button" is not sufficient enough to submit.
Giving the form an action of 'javascript:void(0);' seems to do the trick
<form action="javascript:void(0);">
<input type="text" />
</form>
<script>
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
alert('Hello');
}
});
});
</script>
Do not use type="submit" for inputs or buttons.
Use type="button" and use js [Jquery/angular/etc] to submit form to server.
This is the perfect way, You will not be redirected from your page
$('form input').keydown(function (e) {
if (e.keyCode == 13) {
e.preventDefault();
return false;
}
});
I needed to prevent only specific inputs from submitting, so I used a class selector, to let this be a "global" feature wherever I need it.
<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />
And this jQuery code:
$('.idNoEnter').keydown(function (e) {
if (e.keyCode == 13) {
e.preventDefault();
}
});
Alternatively, if keydown is insufficient:
$('.idNoEnter').on('keypress keydown keyup', function (e) {
if (e.keyCode == 13) {
e.preventDefault();
}
});
Some notes:
Modifying various good answers here, the Enter key seems to work for keydown on all the browsers. For the alternative, I updated bind() to the on() method.
I'm a big fan of class selectors, weighing all the pros and cons and performance discussions. My naming convention is 'idSomething' to indicate jQuery is using it as an id, to separate it from CSS styling.
You could make a JavaScript method to check to see if the Enter key was hit, and if it is, to stop the submit.
<script type="text/javascript">
function noenter() {
return !(window.event && window.event.keyCode == 13); }
</script>
Just call that on the submit method.
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:
Form submission via Enter when submit button is focused.
Form submission when all fields are populated.
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;
}
});
ONLY BLOCK SUBMIT but not other, important functionality of enter key, such as creating a new paragraph in a <textarea>:
window.addEventListener('keydown', function(event) {
//set default value for variable that will hold the status of keypress
pressedEnter = false;
//if user pressed enter, set the variable to true
if (event.keyCode == 13)
pressedEnter = true;
//we want forms to disable submit for a tenth of a second only
setTimeout(function() {
pressedEnter = false;
}, 100)
})
//find all forms
var forms = document.getElementsByTagName('form')
//loop through forms
for (i = 0; i < forms.length; i++) {
//listen to submit event
forms[i].addEventListener('submit', function(e) {
//if user just pressed enter, stop the submit event
if (pressedEnter == true) {
updateLog('Form prevented from submit.')
e.preventDefault();
return false;
}
updateLog('Form submitted.')
})
}
var log = document.getElementById('log')
updateLog = function(msg) {
log.innerText = msg
}
input,
textarea {
display: inline-block;
margin-bottom: 1em;
border: 1px solid #6f6f6f;
padding: 5px;
border-radius: 2px;
width: 90%;
font-size: 14px;
}
input[type=submit] {
background: lightblue;
color: #fff;
}
<form>
<p>Sample textarea (try enter key):</p>
<textarea rows="4">Hit enter, a new line will be added. But the form won't submit</textarea><br/>
<p>Sample textfield (try enter key):</p>
<input type="text" placeholder="" />
<br/>
<input type="submit" value="Save" />
<h3 id="log"></h3>
</form>
If you're using Alpine, you can use the following to prevent form submission by pressing Enter:
<div x-data>
<form x-on:keydown.prevent.enter="">...</form>
</div>
Alternatively you can use the .window modifier to register the event listener on the root window object on the page instead of the element.
<form>
<div x-data>
<input x-on:keydown.window.prevent.enter="" type="text">
</div>
</form>
I have use this Code to disable 'ENTER' key press on both input type [text] and input type [password], you can add other too like input type [email] or also can apply on your desired Input type.
$(document).on('keyup keypress', 'form input[type="text"] , input[type="password"]', function(e) {
if (e.keyCode == 13) {
e.preventDefault();
return false;
}
});
$(document).on("keydown","form", function(event)
{
node = event.target.nodeName.toLowerCase();
type = $(event.target).prop('type').toLowerCase();
if(node!='textarea' && type!='submit' && (event.keyCode == 13 || event.keyCode == 169))
{
event.preventDefault();
return false;
}
});
It works perfectly!
If using Vue, use the following code to prevent users from submitting the form by hitting Enter:
<form #submit.prevent>...</form>
I had a similiar problem, where I had a grid with "ajax textfields" (Yii CGridView) and just one submit button. Everytime I did a search on a textfield and hit enter the form submitted. I had to do something with the button because it was the only common button between the views (MVC pattern). All I had to do was remove type="submit" and put onclick="document.forms[0].submit()
I think it's well covered with all the answers, but if you are using a button with some JavaScript validation code you could just set the form's onkeypress for Enter to call your submit as expected:
<form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;">
The onkeypress JS could be whatever you need to do. There's no need for a larger, global change. This is especially true if you're not the one coding the app from scratch, and you've been brought into fix someone else's web site without tearing it apart and re-testing it.
Something I have not seen answered here: when you tab through the elements on the page, pressing Enter when you get to the submit button will trigger the onsubmit handler on the form, but it will record the event as a MouseEvent. Here is my short solution to cover most bases:
This is not a jQuery-related answer
HTML
<form onsubmit="return false;" method=post>
<input type="text" /><br />
<input type="button" onclick="this.form.submit()" value="submit via mouse or keyboard" />
<input type="button" onclick="submitMouseOnly(event)" value="submit via mouse only" />
</form>
JavaScript
window.submitMouseOnly=function(evt){
let allow=(evt instanceof MouseEvent) && evt.x>0 && evt.y>0 && evt.screenX > 0 && evt.screenY > 0;
if(allow)(evt.tagName=='FORM'?evt.target:evt.target.form).submit();
}
To find a working example: https://jsfiddle.net/nemesarial/6rhogva2/
Using Javascript (without checking any input field):
<script>
window.addEventListener('keydown', function(e) {
if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
e.preventDefault();
return false;
}
}, true);
</script>
If someone wants to apply this on specific fields, for example input type text:
<script>
window.addEventListener('keydown', function(e) {
if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
if (e.target.nodeName == 'INPUT' && e.target.type == 'text') {
e.preventDefault();
return false;
}
}
}, true);
</script>
This works well in my case.
Go into your css and add that to it then will automatically block the submission of your formular as long as you have submit input if you no longer want it you can delete it or type activate and deactivate instead
input:disabled {
background: gainsboro;
}
input[value]:disabled {
color: whitesmoke;
}
This disables enter key for all the forms on the page and does not prevent enter in textarea.
// disable form submit with enter
$('form input:not([type="submit"])').keydown((e) => {
if (e.keyCode === 13) {
e.preventDefault();
return false;
}
return true;
});

How to fire a keyboard keypress using Keycode

I have a scenario where I have to prepare a JS method where Tab key should fire . i.e. When the Function is executed Tab button click should fire. preferably using Key code.
You can dispatch keyboard events, but the results might be less than overwhelming.
As shown below, you can dispatch an event with appropriate properties, but in some browsers the values are empty and the browser virtually ignores it. You can tab to the button and press "Enter" to click it. It dispatches a tab, but focus doesn't move and the associated event doesn't report the values set in the constructor.
Typing into the input shows the type of result you should get. Try it in lots of browsers.
function showEventProperties(evt) {
document.getElementById('details').innerHTML = ['type','key','code','keyIdentifier','charCode','which','keyCode'].map(function(key) {
return key + ': ' + evt[key];
}).join('<br>');
}
function sendTab(node) {
var evt = new KeyboardEvent('keypress', {
'view': window,
'bubbles': true,
'key': 'Tab',
'charCode': 9,
'keyCode': 9,
'which': 9
});
node.dispatchEvent(evt);
}
window.onload = function() {
document.addEventListener('keypress', showEventProperties, false);
}
<input onkeypress="showEventProperties(event)">
<br>
<button onclick="sendTab(this)">Do tab</button><button>Next button</button>
<p id="details"></p>
You can also try the older initKeyEvent.

Simulate enter-key in form field and preserve other handlers

We're trying to make a generic approach for a piece of software we are developing that ties into form fields.
So far so good but we're running in to an edge case that prevents submitting a form/field that has another handler tied in to it.
Here's the (condensed) use case:
HTML:
<form id="form1">
<input type=field id="field1"/>
</form>
click to submit
Normal behaviour is that when a user types 'foo' into the field and hits enter, the form is handled and submitted to the correct 'endpoint' which isn't necessarily the defined one in the form's opening tag. There could be some function (from somewhere else) that handles this enter-event.
Unfortunately, we can't predict what that function is, we like to keep it generic.
In the above HTML, clicking on the link should trigger an enter-event on the form field that mimics the browser/user behaviour and thus some unknown handler.
This is our Javscript (we're using jquery):
$('#field1').keypress(function (event) {
if (event.which == 13) {
console.log("enter pressed");
//return false; only if needed
}
});
$( "#link" ).click(function() {
var e = jQuery.Event('keypress');
e.which = 13; // #13 = Enter key
$("#field1").focus();
$("#field1").trigger(e);
})
When entering 'foo' in the field and pressing enter the form gets submitted. But when we click the link we do a focus() and then firing the key-event but the form isn't submitted.
We can't use a submit() because of the unknown handlers.
Try the code here: http://codepen.io/conversify/pen/yOjQob
What happens when enter key is pressed is, if the input is inside a form, the form is submitted. This is the default behavior. When you simulate a key press, you should do the same, unless the default behavior is prevented.
$('#field1').keypress(function (event) {
if (event.which == 13) {
console.log("enter pressed");
// event.preventDefault(); if needed
}
});
$( "#link" ).click(function() {
var e = jQuery.Event('keypress');
e.which = 13; // #13 = Enter key
$("#field1").focus();
$("#field1").trigger(e);
var form=$("#field1").closest("form");
if(form&&!e.isDefaultPrevented()) form.submit();
})
Now you can pass your event object to the handlers and they can prevent the submit if they want so, or you can prevent it in your keypress handler.
You should separate out the form handler from the enter and click handlers.
var formHandler = function(e) {
// ... code to submit form ...
console.log("form handled");
};
Then set your keypress handler like this:
$('#field1').keypress(function (event) {
if (event.which == 13) {
formHandler();
}
});
And your click handler like this:
$( "#link" ).click(function() {
formHandler();
});
You can unbind the unknown handlers using unbind('submit') and then use submit() like following.
$("#link").click(function () {
$("#form1").unbind('submit').submit();
});

Need to evoke an enter keypress on textarea?

I have this obfuscated webpage that contains a text-area,
When a user manually inserts text and presses Enter key while editing the text area an event that changes the DOM launches.
I need to pragmatically launch that event,
I know how to get to the text-area itself (using getElementsByName)
and I'm basically inserting text via textArea.value = ''
How do I get that event to launch?
Could you call a function when enter is pressed, and then also just call that function when you want to simulate enter being pressed?
element.addEventListener("keypress", function(event){
if (event.keyCode == 13) {
// Enter has just been pressed.
enterPressed();
}
});
function enterPressed(){
// Do whatever you do when enter is pressed.
}
// Somewhere else off in your code when you want to "trigger" the enter press event:
enterPressed();
is this what you want
document.getElementById("id_of_your_textarea").addEventListener("keydown", function(e) {
if (!e) { var e = window.event; }
e.preventDefault(); // sometimes useful
// Enter is pressed
if (e.keyCode == 13) { document.getElementById("id_of_your_textarea").value = '' }
}, false);
EDIT: based on your comment, you can use the trigger
if you can use jQuery.
$('#textArea').trigger('keydown');

Disabling enter key for form

I have been trying to disable the Enter key on my form. The code that I have is shown below. For some reason the enter key is still triggering the submit. The code is in my head section and seems to be correct from other sources.
disableEnterKey: function disableEnterKey(e){
var key;
if(window.event)
key = window.event.keyCode; //IE
else
key = e.which; //firefox
return (key != 13);
},
if you use jQuery, its quite simple. Here you go
$(document).keypress(
function(event){
if (event.which == '13') {
event.preventDefault();
}
});
Most of the answers are in jquery. You can do this perfectly in pure Javascript, simple and no library required. Here it is:
<script type="text/javascript">
window.addEventListener('keydown',function(e){if(e.keyIdentifier=='U+000A'||e.keyIdentifier=='Enter'||e.keyCode==13){if(e.target.nodeName=='INPUT'&&e.target.type=='text'){e.preventDefault();return false;}}},true);
</script>
This code works great because, it only disables the "Enter" keypress action for input type='text'. This means visitors are still able to use "Enter" key in textarea and across all of the web page. They will still be able to submit the form by going to the "Submit" button with "Tab" keys and hitting "Enter".
Here are some highlights:
It is in pure javascript (no library required).
Not only it checks the key pressed, it confirms if the "Enter" is hit on the input type='text' form element. (Which causes the most faulty form submits
Together with the above, user can use "Enter" key anywhere else.
It is short, clean, fast and straight to the point.
If you want to disable "Enter" for other actions as well, you can add console.log(e); for your your test purposes, and hit F12 in chrome, go to "console" tab and hit "backspace" on the page and look inside it to see what values are returned, then you can target all of those parameters to further enhance the code above to suit your needs for "e.target.nodeName", "e.target.type" and many more...
In your form tag just paste this:
onkeypress="return event.keyCode != 13;"
Example
<input type="text" class="search" placeholder="search" onkeypress="return event.keyCode != 13;">
This can be useful if you want to do search when typing and ignoring ENTER.
/// Grab the search term
const searchInput = document.querySelector('.search')
/// Update search term when typing
searchInput.addEventListener('keyup', displayMatches)
try this ^^
$(document).ready(function() {
$("form").bind("keypress", function(e) {
if (e.keyCode == 13) {
return false;
}
});
});
Hope this helps
For a non-javascript solution, try putting a <button disabled>Submit</button> into your form, positioned before any other submit buttons/inputs. I suggest immediately after the <form> opening tag (and using CSS to hide it, accesskey='-1' to get it out of the tab sequence, etc)
AFAICT, user agents look for the first submit button when ENTER is hit in an input, and if that button is disabled will then stop looking for another.
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.
Consequently, if the default button is disabled, the form is not submitted when such an implicit submission mechanism is used. (A button has no activation behavior when disabled.)
https://www.w3.org/TR/html5/forms.html#implicit-submission
However, I do know that Safari 10 MacOS misbehaves here, submitting the form even if the default button is disabled.
So, if you can assume javascript, insert <button onclick="return false;">Submit</button> instead. On ENTER, the onclick handler will get called, and since it returns false the submission process stops. Browsers I've tested this with won't even do the browser-validation thing (focussing the first invalid form control, displaying an error message, etc).
The solution is so simple:
Replace type "Submit" with button
<input type="button" value="Submit" onclick="this.form.submit()" />
this is in pure javascript
document.addEventListener('keypress', function (e) {
if (e.keyCode === 13 || e.which === 13) {
e.preventDefault();
return false;
}
});
Here's a simple way to accomplish this with jQuery that limits it to the appropriate input elements:
//prevent submission of forms when pressing Enter key in a text input
$(document).on('keypress', ':input:not(textarea):not([type=submit])', function (e) {
if (e.which == 13) e.preventDefault();
});
Thanks to this answer: https://stackoverflow.com/a/1977126/560114.
Just add following code in <Head> Tag in your HTML Code. It will Form submission on Enter Key For all fields on form.
<script type="text/javascript">
function stopEnterKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type == "text")) { return false; }
}
document.onkeypress = stopEnterKey;
</script>
You can try something like this, if you use jQuery.
$("form").bind("keydown", function(e) {
if (e.keyCode === 13) return false;
});
That will wait for a keydown, if it is Enter, it will do nothing.
I checked all the above solutions, they don't work. The only possible solution is to catch 'onkeydown' event for each input of the form.
You need to attach disableAllInputs to onload of the page or via jquery ready()
/*
* Prevents default behavior of pushing enter button. This method doesn't work,
* if bind it to the 'onkeydown' of the document|form, or to the 'onkeypress' of
* the input. So method should be attached directly to the input 'onkeydown'
*/
function preventEnterKey(e) {
// W3C (Chrome|FF) || IE
e = e || window.event;
var keycode = e.which || e.keyCode;
if (keycode == 13) { // Key code of enter button
// Cancel default action
if (e.preventDefault) { // W3C
e.preventDefault();
} else { // IE
e.returnValue = false;
}
// Cancel visible action
if (e.stopPropagation) { // W3C
e.stopPropagation();
} else { // IE
e.cancelBubble = true;
}
// We don't need anything else
return false;
}
}
/* Disable enter key for all inputs of the document */
function disableAllInputs() {
try {
var els = document.getElementsByTagName('input');
if (els) {
for ( var i = 0; i < els.length; i++) {
els[i].onkeydown = preventEnterKey;
}
}
} catch (e) {
}
}
I think setting a class to a form is much better. so I coded that:
HTML
<form class="submit-disabled">
JS
/**
* <Start>
* Submit Disabled Form
*/
document
.querySelector('.submit-disabled')
.addEventListener('submit', function (e) {
e.preventDefault()
});
/**
* </End>
* Submit Disabled Form
*/
And also if you want to disable submitting only when Enter Key press:
/**
* <Start>
* Submit Disabled Form
*/
document
.querySelector('.submit-disabled')
.addEventListener('keypress', function (e) {
if (e.keyCode === 13) {
e.preventDefault()
}
});
/**
* </End>
* Submit Disabled Form
*/
in HTML file:
#keypress="disableEnterKey($event)"
in js file:
disableEnterKey(e) {
if (e.keyCode === 13) {
e.preventDefault();
}
}
First you need to disable the form on submit, but re-enable it when clicked on the button. which or keycode is not used in this case, avoiding some problems with compatibility.
let formExample = document.getElementbyId("formExample");//selects the form
formExample.addEventListener("submit", function(event){ //must be used "submit"
event.preventDefault();// prevents "form" from being sent
})
To reactivate and submit the form by clicking the button:
let exampleButton = document.getElementById("exampleButton");
exampleButton.addEventListener("click", activateButton); //calls the function "activateButton()" on click
function activateButton(){
formExample.submit(); //submits the form
}
a variation of this would be
let exampleButton = document.getElementById("exampleButton");
exampleButton.addEventListener("click", activateBtnConditions); //calls the function "activateBtnConditions()" on click
function activateBtnConditions(){
if(condition){
instruction
}
else{
formExample.submit()
}
}
Here is a modern, simple and reactive solution which works in:
React, Solidjs, JSX etc.
is written in Typescript
supports server-side rendering (SSR)
all modern browsers
does NOT require jQuery
blocks ALL Enter keys outside of <textarea> where you want to allow Enter
// avoids accidential form submission, add via event listener
function blockEnterKey(e: KeyboardEvent) {
if (e.key == "Enter" && !(e.target instanceof HTMLTextAreaElement)) {
e.preventDefault()
}
}
// add the event listener before the rendering return in React, etc.
if (typeof window !== undefined) {
window.addEventListener("keydown", blockEnterKey)
// the following line is for Solidjs. React has similar cleanup functionality
// onCleanup(() => document.body.removeEventListener("keydown", blockEnterKey))
}
return(
<form>
...
</form>
)
The better way I found here:
Dream.In.Code
action="javascript: void(0)" or action="return false;" (doesn't work on me)

Categories