i am newbie with Jquery , i have this function :
$(document).ready(function()
{
$('*').keypress(function(e)
{
if(e.keyCode == 13)
{
$("[id^='td_']").click(function()
{
$(this).hide();
});
}
else
{
return false ;
}
});
});
If enter is pressed, i can click in some text to hide him.
The problem is that my function continue to run event if enter is not pressed.
return false do nothing .
Use the event.preventDefault(); to avoid this behavior
$(document).ready(function()
{
$('*').keypress(function(e)
{
if(e.keyCode == 13)
{
e.preventDefault();// this will block further keypress events
$("[id^='td_']").click(function()
{
$(this).hide();
});
}
else
{
return false ;
}
});
});
It looks like you want to press enter, then be able to click to do the hide, and then the click shouldn't run again until enter is pressed first. If that's the case, you can use .one():
$("[id^='td_']").one(function()
{
$(this).hide();
});
.one() will only allow the handler to be called once, then it will be removed.
Related
This is a complete revision of my initial question, all unnecessary resources and references were deleted
I am tying the same event listener to 2 different elements: a button and Enter key, and it looks like the following:
var funcelement = function(){
//function code
};
$('#buttonID').click(funcelement);
$('#inputID').keyup(function () {
if (event.which == 13) {
$('#buttonID').trigger('click');
}
})
What I am trying to do is to prevent propagation of the enter key press if focus is on the submit button(#buttonID) by using preventDefault().
So I tried various combinations to make it work. The following is the latest result on my attempts
$('#inputID').keyup(function () {
var hasfocus = $('#buttonID').is(':focus') || false;
if (event.which == 13) {
if (!hasfocus) {
event.preventDefault();
$('#buttonID').trigger('click');
//hasfocus = true;
}
else {
//event.preventDefault();
//$('#buttonID').trigger('click');
}
}
})
After I enter a text into an input box and press Enter key, a confirmation window with yes/cancel buttons pops up with focus on yes button. Once I press Enter again, another window confirming that changes were made pops up with Ok button focused on it. Once I press Enter again, everything I need is being made.
However, there is one problem: after the last step is done, I am going back to the if (!hasfocus) line.
How do I prevent that from happening? Once the stuff I need is done - I don't want to go into that line again.
You can pass a parameter to into the function and stop the propagation there like so:
var funcelement = function(event, wasTriggeredByEnterKey){
if (wasTriggeredByEnterKey && $('#buttonID').is(':focus')) {
event.stopPropagation;
}
//function code
};
$('#buttonID').click(funcelement);
$('#inputID').keyup(function () {
if (event.which == 13) {
$('#buttonID').trigger('click', [true]);
}
}
)
UPDATE
In order to answer your revised issue, you should use the "keydown" event rather than "keyup" when working with alerts. This is because alerts close with the "keydown" event but then you are still triggering the "keyup" event when you release the enter key. Simply change the one word like this:
$('#inputID').keydown(function () {
var hasfocus = $('#buttonID').is(':focus') || false;
if (event.which == 13) {
if (!hasfocus) {
event.preventDefault();
$('#buttonID').trigger('click');
//hasfocus = true;
}
else {
//event.preventDefault();
//$('#buttonID').trigger('click');
}
}
})
Here is my issue:
I have a button to submit a form, but we also want to have the submit happen if the user presses enter as well. I put in the following code and it works, with one exception ... the text box no longer allows entry.
here is the code:
$(function () {
document.getElementById("newsletter-signup-form")
.addEventListener("keypress", function (event) {
event.preventDefault();
if (event.keyCode == 13) {
document.getElementById("sign-up-submit").click();
}
});
});
Put the event.preventDefault() inside the if, so you let other keys through.
.addEventListener("keypress", function (event) {
if (event.keyCode == 13) {
event.preventDefault();
document.getElementById("sign-up-submit").click();
}
});
I have a jQuery button function that works properly and executes the code inside, what I want is when I press the Enter on the search box, it will execute the same function inside the onclick one. I don't want to copy paste the entire code of my function to the on Enter press event because that will be the wrong way to do it. This is the click event:
$("#checkScout").click(function(e){
...
}
And this is the one I tried with the on enter press
var enterKey = document.getElementById("addChannelsToScout");
enterKey.addEventListener("keydown", function (e) {
if (e.keyCode === 13) {
$("#checkScout").click(function (e);
}
});
it should be just
$("#checkScout").click();
so
$('#addChannelsToScout').keydown(function (e) {
if (e.which == 13) {
$("#checkScout").click();
//$("#checkScout").trigger('click');
}
})
Demo: Fiddle
Try:
$("#checkScout").trigger('click');
Trigger Performance
Change:
$("#checkScout").click(function(e);
To:
$("#checkScout").click();
Your code:
var enterKey = document.getElementById("addChannelsToScout");
enterKey.addEventListener("keydown", function (e) {
if (e.keyCode === 13)
{
$("#checkScout").click();//modified here
}
});
just this will work $("#checkScout").click();
var enterKey = document.getElementById("addChannelsToScout");
enterKey.addEventListener("keydown", function (e) {
if (e.keyCode === 13)
{
$("#checkScout").click();
}
});
actually you need to trigger the event. since it is already been handled it will perform the task that you have written in the event
Check Triggers here http://api.jquery.com/trigger/
$("#checkScout").trigger("click");
<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 have a web page where i have 2 forms when i click the enter key, I am calling a javascript function to force the page to load another page.My code is
function SearchUser()
{
var text = document.getElementById("searchItem").value;
text = text == "" ? -1 : text;
var by = document.getElementById("listBy").value;
var on="";
if(by==1)
{
on="USERNAME";
}
else if(by==2)
{
on="FIRSTNAME";
}
else if(by==3)
{
on="EMAIL_ID";
}
gotoUrl="userlist.php?searchItem="+text+"&onSearch="+on;
alert(gotoUrl);
window.navigate=gotoUrl;
}
and
$(document).ready(function()
{
$("#frmUserListSearch").keyup(function(event)
{
if(event.keyCode == 13)
{
SearchUser();
}
});
});
But the page is doing a form submit when the SearchUSer function being called.I am getting the correct url in the alert.But The page is not loading in the brower
Any Ideas ???
Thanks in advance
if (document.addEventListener) {
document.getElementById('strip').addEventListener('keypress',HandleKeyPress,false);
} else {
document.getElementById('strip').onkeypress = HandleKeyPress;
}
function HandleKeyPress(e) {
switch (e.keyCode) {
case e.DOM_VK_ENTER:
if (e.preventDefault)
e.preventDefault();
else e.returnValue = false;
}
}
EDIT due to original Question edit:
all you need is:
$(document).ready(function()
{
$("#frmUserListSearch").keyup(function(event)
{
if(event.keyCode == 13)
{
SearchUser();
if (e.preventDefault)
e.preventDefault();
else e.returnValue = false;
}
});
});
edited to reflect comment
Returning false often does the trick.
http://javascript.about.com/library/bldisdef.htm
I have two recommendations. First, use the keydown event instead of keyup (it catches "enter" before submit better). Second, in your SearchUser() function, use window.location instead of window.navigate to go to the other page.
$(document).ready(function() {
$("#frmUserListSearch").keydown(function(event) {
if(event.keyCode == 13){
SearchUser();
return false;
}
});
});
NOTE: Don't forget to remove the "alert()" inside the SearchUser() function as it causes the form to submit before navigating away from the page.
You can do this by using the action attribute of the form, without having to deal with key events, granted that you will later need javascript to take action on the control that submits the form.
<html>
<head>
<script type="text/javascript">
function donothing() {}
</script>
<body>
<form action='javascript:donothing()'>
...
</form>
</body>
</html>