Allowing Enter Key and Click Function to both run - javascript

I have the function:
$(document).on('click keypress', '.pTile:not(.join)', function (e) {
if (e.keyCode != 13) {
return false;
}
//Do Stuff
});
This code allows the user to either click the div or press the enter key. My problem, though, is that it really only allows the enter button due to the decision structure that filters the key code. How do I allow both the click and enter button event to go through?

jQuery events have a type property which you can check:
$(document).on('click keypress', '.pTile:not(.join)', function (e) {
if (e.type == 'keypress' && e.keyCode != 13) {
return false;
}
//Do Stuff
});
Alternatively you could extract the logic to its own function and add separate handlers:
function doStuff() {
// Do stuff...
}
$(document).on('click', '.pTile:not(.join)', doStuff);
$(document).on('keypress', '.pTile:not(.join)', function() {
if (e.keyCode == 13)
doStuff.call(this);
});

Related

How to detect esc key press while showing jquery notification

I want to detect the key event of escape while displaying the jquery notification. But as this is blocking the input I'm unable to detecting key board event while noty is showing.
$(document).keyup(function(e) {
if (e.keyCode == 27) {
//your codes
}
});
Use This Code It Works Everywhere:
// define a handler
function doc_keyUp(e) {
if (e.keyCode == 27) {//27 is Esc KeyCode
alert('Escape Key Has Been Pressed!');
}
}
// register the handler
document.addEventListener('keyup', doc_keyUp, false);
You can use onkeyup to pass event handler like-
<input type="text" onkeyup="YourKeyupHandler(event)">
Now you can implement function like-
function YourKeyupHandler(event) {
event = event || window.event || event.srcElement;
if (event.keyCode == 27) {
//here you can do whatever you want
}
}

bind click and keyup of different target to do same function

I have a submit button, I use $("#submit") to perform "myAction function", but in the same time I also want if the user pressed enter, it perform "myAction function"..
I can't do like this
$("#submit").on('click keyup', function(){
//myAction function
});
because I have to attach the keyup event to my input field instead of #submit..
Give a name to your function and bind both event on the selector. Then add a special condition:
function send(e){
if(e.type == 'click' || (e.type == 'keyup' && e.wich == 13))
}
$('[type=text]').on('keyup', send);
$('[type=submit]').on('click', send);
Write your my action as a separate function and use it as below
function myAction() {
console.log('act');
//do your stuff here
}
$("#submit").on('click', myAction);
$("input.enter").on('keypress', function (e) {
//enter key code is 13
if (e.which == 13) {
myAction()
}
});
Demo: Fiddle

press 'Enter' key to invoke a function

In my page there is a button and a text box.
Originally I invoke a function by click the button. Now I also want to implement it by press Enter key as well. But it is not working. Press Enter key doesn't reach myFunction.
<script type="text/javascript">
$(document).ready(function () {
$("#txt1").keyup(function (event) {
if (event.keyCode == 13) {
$("#btn1").click(myFunction);
}
});
$('#btn1').click(myFunction);
});
function myFunction() {
// do something, press enter key doesn't reach here.
})
}
</script>
You are almost right: Just invoke the handler with .click() or .trigger('click')
$(document).ready(function () {
$("#txt1").keyup(function (event) {
if (event.which== 13) {
$("#btn1").click(); // Just do a click.
}
});
$('#btn1').click(myFunction); //Your handler is already registered here.
});
function myFunction() {
// do something, press enter key doesn't reach here.
}
Also use event.which instead of event.keyCode when inside jquery event handler as it normalizes event.keyCode and event.charCode.
Instead of
$("#btn1").click(myFunction);
I reccommend to use:
$("#btn1").on("click", function () {
myFunction();
});
And then:
if (event.keyCode == 13) {
$("#btn1").click(); //click the button
}
JSFIDDLE

Keypress to change class in jQuery

I have a problem I can't seem to sort out.
I have a form with a custom styled button (input type=button). When typing in the text field, I want people to be able to press the TAB key and go to the button. However, it won't use a tab-index so my solution was to highlight the label and change the CSS to give the button a new border color. However, the border color will not change on keypress in any browser other than Firefox.
Here is what I have:
$(function() {
$("#email").bind("keypress", function(e) {
if (e.keyCode == 13) {
send();
return false;
};
if (e.keyCode == 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};
The first enter keypress is to serialize and email the form and all.
I can't seem to get it to work for the life of me. What am I doing wrong? Is there a better solution to what I'm trying to accomplish?
Thanks for taking the time,
Armik
Use keydown instead, for me that works (see demo: http://jsfiddle.net/npGtX/2/)
$(function () {
$("#email").bind("keydown", function (e) {
if (e.keyCode == 13) {
send();
return false;
};
if (e.keyCode == 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};
Also I found this: Suppressing keyPress for non-character keys?
keypress is not necessarily triggered when the keypress is not a
character. So the browser may not trigger an event on backspace, F1,
the down key, etc.
You can use the keyup event and event object's which property, jQuery normalizes the which property and it's cross-browser:
$(function() {
$("#email").bind("keyup", function(e) {
if (e.which == 13) {
send();
return false;
};
if (e.which == 9) {
$("#submit_btn").toggleClass('submit1 submit1after');
};
});
};
$(function() {
$("#email").keypress(function(e) {
if (e.keyCode == 13 || e.which== 13) {
send();
return false;
};
if (e.keyCode == 9 || e.which== 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};

Fire event on hit enter and change

I have one text box when user enter in text box and hit enter it should alert the value, and also if user change the value it should also alert. So there will be two events keypress and change. And I want call this with minimum code. no duplicate codes.
$('#txt').keydown(function (e){
if(e.keyCode == 13){
alert('you pressed enter ^_^');
}
})​
Online Demo
You can list multiple events as the first parameter (though you still have to handle each event):
$('#txt').bind('keypress change', function (e){
if(e.type === 'change' || e.keyCode == 13) {
alert('you pressed enter ^_^');
}
})​;​
I'm using bind on purpose, because the OTs fiddle uses jQ 1.5.2
This is how I would approach this problem.
http://jsfiddle.net/tThq5/3/
Notes: I'm using $.live() (v.1.3) rather than $.on() (v1.7) and also returning false so I don't get more than 1 event fired.
$('#txt').live('keypress change', function(e) {
if (e.type === 'keypress' && e.keyCode == 13) {
alert('you pressed enter');
return false;
} else if (e.type === 'change') {
alert('you made a change');
return false;
}
});​
Something like this?
$('#txt')
.keydown(function (e) {
if(e.keyCode == 13){
alert('you pressed enter ^_^');
}
})
.change(function(e) {
alert('you changed the text ^_-');
});
Try the live approach:
$("#txt").live({
change: function(e) {
alert('you changed the value');
},
keydown: function(e) {
if (e.keyCode == 13) {
alert('you pressed enter ^_^');
}
}
});
http://jsfiddle.net/tThq5/1/

Categories