I'm solving the problem with default submit button in IE7. When I press "enter" key in input field, than some button on the page is clicked. So I've found the solution for this:
$(document).bind("keypress", function(ev) {
ev.keyCode == 13 && ev.preventDefault();
});
But there is the problem with this code: textarea tag don't get "new line". So I tried this:
$(document).bind("keypress", function(ev) {
if (ev.keyCode == 13 && ev.target.type != "textarea")
ev.preventDefault();
});
It works but looks dirty. The question is: can you advice better solution for the Problem?
Thank you in advance.
If it is to simply prevent the form submission on enter keypress, test on the keypress when the form is trying to submit...
$(your_form).submit(function(ev){
if (ev.keyCode == 13){
// Prevent form submission behaviors if the event was fired by enter keypress
ev.preventDefault();return false;
}
// And code for form submission here, or just keep the return true to make it behave normally.
return true;
});
This is not dirty. But if you want one line, you still could do with:
ev.keyCode == 13 && ev.target.type != "textarea" && ev.preventDefault();
A more elegant solution would be to use jQuery's submit handler and return false:
$('#myForm').submit(function(ev){
// custom form handling code here
return false;// prevent browser default form submission
});
Alternatively, you could also call .preventDefault() on the event object, passed in to the submit handler.
Related
A small problem which I can't find a solution for (maybe I googled with wrong keywords):
The situation:
I prevent a form being submitted by hitting the Enter Key (13).
To be noted that the form will be submitted by AJAX, therefore there will be no page reload.
Preventing the Enter Key is a simple task and it works:
$(document).on('keypress', 'input', function (e) {
if (e.which === 13) {
return false;
}
});
The problem:
The focus on the next input is not working because of the return false.
If I omit the return false part, naturally the form is submitted by AJAX and the focus() is working.
$(document).on('keypress', 'input', function (e) {
if (e.which === 13) {
// Simplifying the selector of the next input
// because this isn't the problem
$(this).next().focus();
return false;
}
});
Any ideas on how to solve that?
Try by calling a function in your if condition and having $(this).next().focus(); in that function. In the callback function you can return false to prevent form submit.
I'm trying to disable Enter key submit on a form but allow the Enter key event to be registered for some other code I have listening. Is this possible?
$('#createPost :input').on("keypress", function(e) {
if(e.target.id == 'post-author' && e.which == 13){
e.stopPropagation();
e.stopImmediatePropagation();
}
});
Is not working :( it still submits the form
You need to call e.preventDefault() to cancel submit action.
return false; from handler also works. And that works in more ancient browsers, even though this is not important with jQuery.
I'm developing an application that runs on one page, and does not reload. I have a form with only an input type text, no submit button. I included the onchange event, after filling the textbox with data, I want to execute the function bound to the onchange event when I press enter, but the form is rather submitted and [it attempts to load a new page]. Please what do I do? Thanks
You can hook the keypress event on the text box and call your handler, and cancel the event to prevent the form submission:
$("selector_for_your_text_box").keypress(function(event) {
if (event.which === 13) {
// call your `change` logic here
// Cancel the event
return false;
}
});
Live example
This should work:
$(function() {
$('#yourInput').keypress(function(event) {
var key = event.keyCode || event.which;
if (key == 13) {
event.preventDefault();
// call your function here
});
});
Yuo can bind to the keypress event on the input:
$('#inputfieldid').keypress(function() {
alert('Handler for .keypress() called.');
});
Try the demo link http://jsfiddle.net/HDkJW/
Users don't like the fact that the Enter key submits the page. So I am tasked with preventing the submission and changing the Enter key to a Tab to the next field.
I have tried many javascript snippets found on the net but none have worked so far. The only one that has even come close to having an effect was e.preventDefault() of the jQuery API, which stops the submit, but nothing I have tried emulates the tab behavior.
e.returnValue = false;
e.cancel = true;
Page still submits with the above in the keydown event handler. Same effect with return false in the keydown event handler. The handler is firing, tested by putting a breakpoint in it with firebug.
This needs to work with both IE and Firefox.
Don't say "don't do this".
1) I'm already convinced that I shouldn't do it, but it's not a choice that is mine, so the discussion is mute.
2) It would be an answer to the question "Should I do this?", which is not the question that I am asking.
This just feels icky, but you could use event.preventDefault as you mentioned and then call focus() on the next closest input:
Here's a simple example:
$("input").bind("keydown", function(event) {
if (event.which === 13) {
event.stopPropagation();
event.preventDefault();
$(this).next("input").focus();
}
});
Example: http://jsfiddle.net/andrewwhitaker/Txg65/
Update: If you have elements in between your inputs, using plain next() will not work. Instead, use nextAll():
$("input").bind("keydown", function(event) {
if (event.which === 13) {
event.stopPropagation();
event.preventDefault();
$(this).nextAll("input").eq(0).focus();
}
});
http://jsfiddle.net/andrewwhitaker/GRtQY/
$("input").bind("keydown", function(event) {
if (event.which === 13 && this.type !== 'submit') {
event.preventDefault();
$(this).next("input").focus();
}
});
Based on this post:
http://forum.jquery.com/topic/how-to-find-next-node-in-focus-order
I came up with this. I eventually chose not to use focasables though, and instead use input to get the effect I wanted. The .not is to prevent image buttons and submit buttons from being effected, so that they still have the default action of submit on enter whenever they have focus.
$(document).ready(function() {
var focusables = $(":input").not('[type="image"]').not('[type="submit"]');
focusables.keydown(function(e) {
if (e.keyCode == 13) {
e.preventDefault();
var current = focusables.index(this),
next = focusables.eq(current + 1).length ? focusables.eq(current + 1) : focusables.eq(0);
next.focus();
}
});
});
This question already has answers here:
Prevent users from submitting a form by hitting Enter
(36 answers)
Closed 2 years ago.
Is there a way to make a form NOT refresh or call anything when you hit "Enter" key on your keyboard?
Thank you so much!!!
I found this code for preventing Enter from working, but it DOESN'T work in IE :(
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
}
Try this:
$(function() {
$("form").submit(function() { return false; });
});
Disabling the submit event isn't a good idea. Now you can never submit the form by pressing the button where it is for.
Rather hook on the keypress event:
<form onkeypress="return event.keyCode != 13">
or in jQuery flavor:
$('form').keypress(function(event) {
return event.keyCode != 13;
});
13 is the keyCode of Enter key. This works in all browsers from IE6 up to with all the current ones. You only have to take textareas into account. You may then consider this construct instead:
$(':input:not(textarea)').keypress(function(event) {
return event.keyCode != 13;
});
add onSubmit property on form's tag.
<form onSubmit="return false;">
You can prevent form submission by 'enter' key natively if you are using AngularJS.
According to HTML specification and AngularJS, you need to check this list:
Form must have NO action=... attribute (AngularJS handles it automatically)
Form must have NO button with type="submit" attribute
So, if you have no action attribute and submit button, then your form should not be submitted by hitting enter key.
Also, cross-browser keyCode is this:
var code = (e.keyCode ? e.keyCode : e.which);