This question already has answers here:
'Enter key' wont submit form in Firefox, but will in Chrome, why?
(2 answers)
Closed 9 years ago.
I have a inputfield and an eventlistener keypress, in Firefox erverything is fine. If I run it in Chrome and hit the enter key the browser refreshes and the page is loaded again.
$('#iputField').keypress(function(e) {
if (e.which == 13) {
var message = $('#iputField').val();
}
});
Probably the form is submiting, you have to stop the default event propagation to avoid that.
$('#iputField').keypress(function(e) {
if(e.which == 13) {
e.preventDefault();
var message = $('#iputField').val();
}
});
Try saying e.preventDefault(); after the function ends.
If you're using a form, you probably need to call e.preventDefault().
Handling the "Enter" / "Return" key in Chrome
Try preventing the default behaviour:
$('#iputField').keypress(function(e) {
if(e.which == 13) {
e.preventDefault().
var message = $('#iputField').val();
}
});
Related
This question already has answers here:
How can I detect pressing Enter on the keyboard using jQuery?
(19 answers)
Closed 6 years ago.
I have a textbox in HTML:
<input id="myInfo">
I would like to run an AJAX function as soon as the user enters in some value into the textbox using jQuery. I want the function to be called as soon as the user presses the "Enter"
Can someone please provide a very simple illustration as to how this would be accomplished?
Thank you
You could do something like
document.getElementById('myInfo').addEventListener('keypress', function(event) {
// you could also do keyCode === 13
if (event.key === 'Enter') {
console.log('do ajax request here');
}
})
Demo here: http://codepen.io/3stacks/pen/jyVpQP?editors=1111
$('#myInfo').on('keydown', function(e){
if(e.keyCode == 13)
{
//your code
}
});
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Prevent Users from submitting form by hitting enter
I wrote some simple code (you can also test it here )
<form >
<input id="id2" type='text' />
</form>
$("#id2").keydown(function(e) {
if (e.keyCode == 13) {
alert('nope!');
return false;
}
});
If I click enter I should see an alert with "nope!" and then nothing. But, after I click "ok" on the alert window, the form is submitting despite the function returning false.
What is it? Something strange multithreading in javascript? Bug? Or...
Use the keypress event rather than the keydown event:
$("#id2").keypress(function(e) {
if (e.keyCode == 13) {
alert('nope!');
return false;
}
});
Updated demo
This question already has answers here:
How can I execute a function on pressing the enter key in an <input> field?
(12 answers)
Closed 4 years ago.
im trying to make my own chat... so i have an input text field, the submit button, isn't even submit, its just a button.... so when the enter key is pressed, i need the value of the input field to appear in my textarea (which is readonly)...
well look.. make long story short, i just want a basic enter key event handler, i know it works perfectly with submit buttons cus you don't need to program anything at all, its default. but my button is type="button" .... so when you press enter nothing happens... how do i trigger my button by pressing enter?
You could make the button type submit, or you can use the onkeyup event handler and check for keycode 13.
Here's a list of key codes: Javascript Char codes/Key codes). You'll have to know how to get the keycode from the event.
edit: an example
HTML:
<input onkeyup="inputKeyUp(event)" ...>
Plain javascript:
function inputKeyUp(e) {
e.which = e.which || e.keyCode;
if(e.which == 13) {
// submit
}
}
Here is a working code snippet for listening for the enter key
$(document).ready(function(){
$(document).bind('keypress',pressed);
});
function pressed(e)
{
if(e.keyCode === 13)
{
alert('enter pressed');
//put button.click() here
}
}
Here is a version of the currently accepted answer (from #entonio) with key instead of keyCode:
HTML:
<input onkeyup="inputKeyUp(event)" ...>
Plain javascript:
function inputKeyUp(e) {
if (e.key === 'Enter') {
// submit
}
}
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);