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();
}
});
});
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 using a bit of jQuery mixed in to an ASP.NET page and it doesn't seem to do what it ought to. I'm trying to re-assign the up and down arrows and enter key for text boxes so that the user can navigate up and down through the column (like in Excel). I have the event handler set up OK and it works, but I can't get the following part to work correctly:
e.preventDefault;
e.stopPropogation;
Particularly with the enter key, it is still submitting the form even with those two lines in. The only way I can get it working is with the following:
event.cancelBubble = true;
event.returnValue = false;
But from what I've read you shouldn't use those because the two jQuery methods are browser independant. Any help understanding all of this would be great :-)
UPDATE
I've got the handler in a block like this:
//handles the up/down arrow behaviour of the score boxes
$('.gScoreTB').keydown(function (e) {
if (event.keyCode == 13) {
event.cancelBubble = true;
event.returnValue = false;
}
});
Just a simple example to try and stop the enter key behaviour at the moment: will add keyCode == 38 and 40 for the other arrows once this is nailed.
Both preventDefault and stopPropagation are functions, so you should be doing:
e.preventDefault();
e.stopPropogation();
But it's easier to just return false (which is the same as invoking both):
//handles the up/down arrow behaviour of the score boxes
$('.gScoreTB').keydown(function (e) {
if (e.keyCode == 13) {
return false;
}
});
I noticed that if you focus on an element that mouse clic can be triggered, the Enter keys acts like as you left click the mouse. I want to avoid this running since it comes into conflict in other pieces of my code.
In the following example if I focus on this imageButton and I clic once, the next clicks can be "done" with the Enter key, so I don't want this because this button fires a slideToggle() and shows a hidden div, so IMO it's pointless toggle this div with the keyboard.
Is there any way to make it global way?
Thank you.
Try this:
$(".myElements").keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
}
});
It will stop the enter key behaviour only, allowing the other key functions to work as usual.
Listen for "keypress" and .preventDefault()
ex. with <myelm class="nokey"/>
function noKeyPressing(){
var elms = document.getElementsByClassName('nokey'),
stop = function stop(e){ return e.preventDefault(), false; },
i = elms.length;
while(--i >= 0){
elms[i].addEventListener('keypress', stop, true);
}
}
noKeyPressing()
If you just want to prevent Enter then the keyCode to look for is 13.
try
.unbind('keydown');
to disable all key events on your element
You can return false to prevent the default action.
<input type="submit" onkeypress="return false;" value="Submit" />
An other possible way i think:
$('.elems').on('click',function(){$(this).blur()});
try this code
$('body *').keypress(function (e) {
if (e.which == 13) {
e.preventDefault();
}
});
the above code will prevent pressing enter for every element in page
,You can change the selector $('body *') to something else depending to your case
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.
I have a table with a quick edit function (updates only one field using AJAX), and I wish for 'enter' to submit the change. Trouble is, I have a button on a form on the same page, and every time I press 'enter' the action attached to that button (i.e. submit the form, which I do not want to do) is fired, and I cannot figure out for the life of me how to prevent that.
I've tried the following code, preventing the default on the keyup event (which is probably wrong) and on the button. My understanding though is that you prevent the default of an event, not an object, so I'm really not sure what to do -
/** Capture a key press (while a field within the quick edit row is selected) */
qeRow.keyup(function(e){
e.preventDefault(); // Also tried '$('#change-permissions-button').preventDefault'
if(e.keyCode === 27) { // Cancel on 'escape' (This is working fine)
return inlineEditUserGroup.revert();
} else if(e.keyCode === 13) { // Save the data on 'enter'
return inlineEditUserGroup.save();
}
});
Thanks.
Try listening to the keydown or keypress event.
qeRow.keypress(function(e){
e.preventDefault(); // Also tried '$('#change-permissions-button').preventDefault'
if(e.keyCode === 27) { // Cancel on 'escape' (This is working fine)
return inlineEditUserGroup.revert();
} else if(e.keyCode === 13) { // Save the data on 'enter'
return inlineEditUserGroup.save();
}
});
I guess the keyup-event is triggered 'to late', because it only listens to a key after you pressed in, and than the form is already submitted.