I have a form that I want to prevent submit it when user press Enter
But there are 3 inputs that I want to exclude of this "rule".
Doing this I can prevent the submit event when Enter is pressed:
$(document).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
But how can I exclude my three inputs from this rules?
Here is what I tried out:
$(document).not("#input1", "#input2", "#input3").keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
And this other:
$(document).keydown(function(event){
if(event.keyCode == 13) {
if ($(event.target).is('#input1') == false || $(event.target).is('#input2') == false || $(event.target).is('#input3') == false) {
event.preventDefault();
return false;
}
}
});
My really intention is prevent enter on ALL inputs excluding that three inputs, but when Enter is pressed in one of that inputs I like to run a trigger().
Test whether the target is one of the elements you want to exclude. If this is true, return from the handler immediately. You also need to call event.stopPropagation(), otherwise the event will bubble out to other elements that aren't the excluded elements.
$(document).keydown(function(event) {
if (event.keyCode == 13) {
if ($(event.target).is("#input1,#input2,#input3")) {
event.stopPropagation();
return;
}
event.preventDefault();
return false;
}
}
Related
I have some business logic on '#mySelect' change. When I click on select or press any button matching option, this option is instanly selected (not highlighted as default). So I need to keep default hightlighting logic and keep my business login in onChange. By my own I achieved only separating events:
$('#mySelect').on('change keyup keydown', function(event) {
if (event.type !== 'change' && event.which !== 13) {
$(this).find(':selected').trigger('hover');
return false;
}
...// onChange logic
})
But for now matching option is not hightlighted and onChange successfully executing when I press return button or click.
Any suggestions to solve this?
I solved this in not elegant way:
var keyNotPressed = true;
if (event.type !== 'change' && event.which !== 13) {
keyNotPressed = false;
}
if (event.type === 'change' && !keyNotPressed) {
....
}
I have forms on different pages of my applications. Upon pressing 'Enter' or 'Esc', the form on the current page must be 'Submitted' or 'Cancelled'. The keydown() function should be triggered anywhere on the page and not tied to a specific DOM element.
.js
$(document).keydown(function(e) {
if(e.which == 13) {
// enter pressed
$('#submitCreateAccountForm').click();
$('#submitForm').click();
$('#submitNewSubmissionForm').click();
}
if(e.which == 27) {
// esc pressed
$('#submitCreateAccountFormCancel').click();
$('#submitFormCancel').click();
$('#submitNewSubmissionFormCancel').click();
}
});
What should 'document' be replaced by? Thanks
try this
$(function(){
$('html').bind('keypress', function (e) {
if (e.keyCode == 13) {
//do somethings
}
else if (e.keyCode == 27) {
return false;
}
});
});
You can try this code:
$("body").keyup(function(event){ // bind keyup event to body
if(event.keyCode == 13){ // 13 - code of enter key (find for ESC)
$("#enter").click(); // bind enter press for clicking botton with id="enter" and corresponding actions
}
});
In my project I need diable Enter key for some textbox , because i don't want post page when enter key button . I use this Code for disable Enter key :
$(document).keypress(
function (event) {
if (event.which == '13') {
event.preventDefault();
}
});
Its work fine , but when Add textarea in page , I cant enter key for break line , because Enter key disabled .
how can I enable Enter key for textarea?
I don't know if its recommended to attach a global keypress handler like that. Regardless, the easiest way out would be
$(document).on('keypress',
function (event) {
if (event.which == '13' && event.target.tagName != 'TEXTAREA') {
event.preventDefault();
}
});
In the above, you are checking the tagName of event.target to see if the element in which the enter occured is a textarea or not
However, I would recommend this approach
$('form').on('keypress', 'form',
function (event) {
if (event.which == '13') {
event.preventDefault();
}
});
This will target all input elements and not textarea elements,
You should bind your form to detect the Enter key as,
$('#formid').on("keyup keypress", function(e) {
var code = e.keyCode || e.which;
if (code == 13) {
e.preventDefault();
return false;
}
});
Here is a demo
By this you will be able to use the Enter key on your text area without submitting the form.
I'm trying to implement a form with multiple buttons on it. When I press enter I want to have my default button submitted. This code from http://greatwebguy.com/programming/dom/default-html-button-submit-on-enter-with-jquery/ generally works:
$(function() {
$("form input").keypress(function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$('button[type=submit].default').click();
return false;
} else {
return true;
}
});
});
but...
when I type in input field I have an autocomplete popup so when I press enter in this popup I expect to put this value to input field, not submit all form. Can I check somehow if this enter comes from popup? Or I should try to do this different way?
EDIT:
I think I didn't say it clear. This popup is not any part of jquery. It's standard popup that shows previously typed data into input. So it hasn't got any class nor id. Stop propagation doesn't work either. None of solutions below resolve this problem
You could use :visible to see if the dropdown div for the autocomplete is open, and then prevent the enter key action of your code completing. Something like this:
$("form input").keypress(function(e) {
var key = e.which || e.keyCode;
if (key == 13 && !$(".autocomplete").is(":visible")) {
e.preventDefault();
$('form').submit();
}
});
You could also use event.stopPropagation() on the enter key press in the autocomplete function, however you'll probably have to amend the source manually which isn't ideal.
Before return false;
write
e.preventDefault();
or/and
e.stopPropagation();
$("form input").keypress(function (e) {
if (e.target.id !== "autoCompliteId" && ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13))) {
$('button[type=submit].default').click();
return false;
} else {
return true;
}
});
I modified my code and it works now.
I have an enum called Operation in my command and I set different value of the field before every submit button eg:
<input type="submit" value="do sth" onclick="setOperationAndSubmit('DO_STH')"/>
<input type="submit" value="next" onclick="setOperationAndSubmit('DEFAULT')"/>
function setOperationAndSubmit(operation) {
if (document.myForm.elements['operation'].value === '') {
document.myForm.elements['operation'].value = operation;
}
document.myForm.submit();
}
Then I have my action that listens to keypress and it set appropriate operation on every enter key:
$(function() {
$("form input").keypress(function(e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
document.myForm.elements['operation'].value = 'DEFAULT';
}
});
});
so default action is executed when I press enter
I have this function where #text_comment is the ID of a textarea:
$('#text_comment').live('keypress',function (e) {
if(e.keyCode == 13) {
textbox = $(this);
text_value = $(textbox).val();
if(text_value.length > 0) {
$(this).prev().append('<div id="user_commenst">'+text_value+'</div>');
$(textbox).val("");
}
}
});
What is happening is the text is appending when the enter/return key is hit (keyCode 13), but it is also moving the text a line down, as the enter/return key is supposed to.
This is occurring even though I set the value of the textbox to "".
How about event.preventDefault()
Try and stop your event propagation (See http://snipplr.com/view/19684/stop-event-propagations/) when entering the if(e.keyCode == 13) case.
try this one event.stopImmediatePropagation()
$('#text_comment').live('keypress',function (e) {
if(e.keyCode == 13) {
e.stopImmediatePropagation()
///rest of your code
}
});
I've tested this out, this works. The enter does not create a new line.
$('#text_comment').live('keypress',function (e) {
if(e.keyCode == 13) {
textbox = $(this);
text_value = $(textbox).val();
if(text_value.length > 0) {
$(this).prev().append('<div id="user_commenst">'+text_value+'</div>');
$(textbox).val("");
}
return false;
}
});
Although I am wondering, if you don't want to ever have a new line, why are you using a textarea, why not use a input type='text' instead ?
Answer here http://jsfiddle.net/Z9KMb/