I want when a user will hit ENTER key in INPUT BOX a function will be activate. Something like below:
if (ENTERKEY is Pressed in INPUTBOX){
Function(){....
}
};
This is Input box:
<input class="form-control" type="text" id="second_gear"/>
to trigger this function after hitting the ENTER key:
jump = function () {
//do...........
//do.....
}
Try this:
$( "#INPUTBOX" ).focus(function() {
function (event) {
if (event.which == 13 || event.keyCode == 13) {
//code here
return false;
}
return true;
});
Related
In my code, if you start typing your ermail in the form input and then use the down-arrow key to select an auto-suggest entry, and press ENTER, the function will trigger, even though I'm not pressing ENTER on the actual input.
function sysOnEnter(event) {
if (event.keyCode == 13) {
event.preventDefault();
console.log('key was enter');
}
}
<input type="text" name="email" onkeypress="sysOnEnter(event)">
After more research I managed to answer my own question.
function sysOnEnter(event, id) {
var key = event.key || event.keyCode;
if (key == 'Enter' || key == 13) {
var val = document.getElementById(id).value;
setTimeout(function() {
if (document.getElementById(id).value == val)
console.log('captured ENTER event');
},0);
event.preventDefault();
return false;
}
}
<input type="text" id="email" onkeypress="sysOnEnter(event, this.id)">
UPDATE: I am constructing the form via Javascript, so the form is not there on page load.
I have an input field with id="input", whenever the enter key is pressed, the form gets submitted. So I tried handling it like this.
$("#input").keydown(function (e) {
if (e.keyCode == 13) {
alert("enter pressed");
return false;
}
});
However this does not work, there is no alert and the form still gets sent. How do I solve this?
Use preventDefault() to prevent the form from submitting.
$("#input").keydown(function (e) {
if (e.keyCode == 13) {
alert("enter pressed");
e.preventDefault();
}
});
Example with a form:
$('form').submit(function(e){
e.preventDefault();
});
https://jsfiddle.net/aya6ockv/
Use onkeypress attribute in your input as follows:
<input type="text" onkeypress="myFunction(event)">
<script>
function myFunction(event) {
var x = event.which || event.keyCode;
if(x == 13) {
alert("enter pressed");
return false;
}
}
</script>
I would do it like this and change 'form' to #input. Unless you want to stop this enter submission site wide, then this as is should work well.
$("form").bind("keypress", function(e) {
if (e.keyCode == 13) {
return false;
}
});
Just created a JSFiddle that shows that it works. Check it out
$('#input').keydown(function (e) {
if (e.keyCode == 13) {
alert('alert pressed');
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form">
<input text="name" id="input">
<button type="submit">Submit</button>
</form>
return false is more efficient than e.preventdefault(). Please look at event.preventDefault() vs. return false
$("#input").keydown(function (e) {
if (e.which == 13) {
alert("enter pressed");
return false;
}
});
<script type="text/javascript">
function onDataBound(e) {
$("#batchgrid").on("click", "td", function (e) {
$("input").on("keydown", function (event) {
if (event.keyCode == 13) {
event.keycode=9;
return event.keycode;
}
});
});
}
</script>
here i'm using above script to fire tab key press event when i press the enter key.but it doesn't behave as tab key pressed when i press the enter key.
please help me here..
return event.keycode is effectively return 9, and even return event will not help, as returning the event does not mean that will be handled properly, what you probably want to do instead is to take the enter event and then manually change focus to the next required field:
function onDataBound(e) {
$("#batchgrid").on("click", "td", function (e) {
$("input").on("keydown", function (event) {
event.preventDefault();
if (event.keyCode == 13) {
$(this).next("input, textarea").focus()
}
});
});
}
It will not simulate until you prevent the default enter key event.
event.preventDefault(); should be the first command of your function.Then implement the tab key event.Your code should be something like this :
<script type="text/javascript">
function onDataBound(e) {
$("#batchgrid").on("click", "td", function (e) {
$("input").on("keydown", function (event) {
event.preventDefault();
if (event.keyCode == 13) {
event.keycode=9;
return event.keycode;
}
});
});
}
</script>
Hope it will work.
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 an input (outside form) that captures name of an image. User should fill in a new name and hit enter. Ajax callback renames the image. This works.
I'd like to add ability to 'reset' the input content when the user presses escape (#27). But I'm not able to fill the value of the input with my value.
The code is
<input id="escapeInput" value="this is test" /> <input type="button" id="setDetaultToEscapeInput" value="Set default" />
jQuery(document).ready(function() {
jQuery("#escapeInput").keydown(function(evt) {
if (evt.keyCode == 27) {
var input = jQuery(this);
input.val('some default value') // doesn't work
input[0].value = 'some default value 2'; // doesn't work
input.parent().append('changed');
}
});
jQuery("#setDetaultToEscapeInput").click(function() {
var input = jQuery("#escapeInput");
input.val('some default value') // works ok
});
});
The interesting thing is that if I test e.g. for 'A' character ( if (evt.keyCode == 65)), the code works.
Any idea how to handle it? It doesn't work only in FF (Opera and IE8 are OK).
Try using the keyup event instead.
$(function() {
$("#escapeInput").keyup(function(e) {
if (e.keyCode == 27) {
$(this).val("some default value");
}
});
});
Try this
$(document).ready(function () {
$("#escapeInput").keypress(function (evt) {
var keycode = null;
if (evt.keyCode) {
keycode = evt.keyCode;
} else {
keycode = evt.which;
}
if (keycode == 27) {
$(this).val("some default value");
}
});
});