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.
Related
I have the following piece of code in an asp mvc page
$('#regForm').submit(function (event) {
if (event.keyCode == '13') {
event.preventDefault();
}
});
The aim is to prevent the form from submitting when enter is pressed.
We have noticed that in ie 11, this is not working, and on stepping into the code via debug, event.keycode is null. I have been doing some researching on this, and it seems to be an issue because we have the IE-8 Compatibility Meta Tag present on the page, which means that event.keyCode (and event.which) returns undefined for the event, and so my form is always submitted.
So how do I rewrite this to get round the issue?
You need to use the keypress event, not form submit
$('#regForm').keypress(function (event) {
if (event.keyCode == 13) {
event.preventDefault();
}
});
Try something like this, use window.event:
$('#regForm').submit(function (e) {
var keyCode = (window.event) ? e.which : e.keyCode;
if (keyCode == '13') {
e.preventDefault();
}
});
Use type="button" attribute with <button> element
So that IE thinks the button as a simple button instead of a submit button.
So form will not submit
You can also get more details from below url
http://tjvantoll.com/2013/01/01/enter-should-submit-forms-stop-messing-with-that/
$('#regForm').keypress((event) => {
if (event.key === "Enter") {
event.preventDefault();
}
});
I want to disable the "Enter" button on the keyboard so that when the user press enter to submit the form, nothing happens, and doing something else rather than submitting the form, such as alerting "Using keyboard is not allowed."
Here is what I have done, #calculator is a button:
$(document).ready(function(){
$("#calculator").keydown(function(){
console.log("Enter is disabled.");
return false;
});
});
Currently on its submission the form results unexpectedly (for instance redirects to the target page but without any CSS loaded.
$(document).on('keypress', function(e){
if(e.which == 13) {
e.preventDefault();
}
});
You can use .keypress() event to check which key was pressed then check the code of the key using e.keycode or e.which, if it's 13 then prevent submitting form:
$(document).keypress(function(e){
var code = e.keyCode || e.which;
if (code == 13 ) {
e.preventDefault();
return false;
}
});
For it, don't use submit button.
Use a div, style it like a button and submit the form using javascript on click of the div :)
Try this
For Disabling Keyboard
document.onkeydown = function (e) {
alert('Using keyboard is not allowed')
}
For Disabling Enter
$(document).on('keypress', function(e){
if(e.which == 13) {
e.preventDefault();
}
});
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 a textbox with a keydown handler. The handler detects if you press escape and if so it is meant to clear the textbox value. However, calling tb.value = "" normally works, unless the textbox has focus in which case it does nothing. I suspect I have to select the text and delete it, but how? This is in Firefox 12.
Have a look at this:-
LIVE DEMO
HTML:
<input type="text" id="content" />
JS:
$(document).keyup(function(e) {
if (document.activeElement.nodeName == 'INPUT')
{
if (e.keyCode == 13) { // Enter
alert('Enter Key Up');
}
if (e.keyCode == 27) { // Esc
alert('Esc Key Up');
$('#content').val("");
}
}
});
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/