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
Related
I want to capture "enter" and "blur" on a form field. If I hit "enter" and "tab", it will also trigger the blur event... Only one trigger, so "OR" not "AND.
$('#login-input-password').bind('blur keypress', function(e){
if (e.type == 'blur' || e.keyCode == 13) {
// do something only once, not twice
// e.g., if I hit "[enter"] and tab to blur, I don't want it to call twice...
}
});
answer accepted implemented
FUNCTION usage
function bindTriggerEnterOrBlur(selector,myFunction)
{
$(selector).bind('blur keypress', function(e){
if (e.type == 'blur' || e.keyCode == 13) {
if (!$(selector).data('has-triggered')) {
$(selector).data('has-triggered', true);
// do something only once, not twice
myFunction();
// e.g., if I hit "[enter"] and tab to blur, I don't want it to call twice...
}
}
});
$(selector).bind('focus', function(e){
$(selector).data('has-triggered', false);
$(selector).select();
});
}
CALL to FUNCTION
bindTriggerEnterOrBlur('#login-input-email',submitLoginEmail);
Where submitLoginEmail is the function that does something for the trigger, e.g.,
function submitLoginEmail()
{
// submit on enter...
var email = $("#login-input-email").val();
if(validEmail(email))
{
submitNextLogin();
}
}
If I am getting your requirement right, you want to execute the callback only once but currently it is getting executed twice.
If that is the case then you will need some way to indicate if the callback has been called already.
One way would be to use data attributes
$('#login-input-password').bind('blur keypress', function(e){
if (e.type == 'blur' || e.keyCode == 13) {
if (!$(this).data('done') {
$(this).data('done', true);
// do something only once, not twice
// e.g., if I hit "[enter"] and tab to blur, I don't want it to call twice...
}
}
});
You will also need another event handler to reset the done attribute of the element
$('#login-input-password').bind('focus', function(e) {
$(this).data('done', false);
});
You are doing an OR. You want a XOR (Exclusive OR), which has to be done using a combination of comparisons.
if (( (e.type == 'blur') && !(e.keyCode == 13)) ||
(!(e.type == 'blur') && (e.keyCode == 13))) {
// do something only once, not twice
// e.g., if I hit "[enter"] and tab to blur, I don't want it to call twice...
}
You want to prevent the script from firing again though, so you'll need to do even more state comparison to make sure your asynchronous event handler knows that the blur or keypress events have occurred and ensure the handler doesn't run twice.
You can also do something like:
var doo = function(e){ console.log("do..."); }
$('#wmd-input').bind('blur', doo);
$('#wmd-input').bind('keypress focus', function(e) {
$('#wmd-input').off('blur');
if (e.keyCode == 13) {
doo(e);
} else
$('#wmd-input').bind('blur', doo);
});
And it does bind again when focus happens.
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);
});
I want to split blur and enter key functions. So I mean that I want jquery to do another function on blur and another on enter key. If enter key was clicked then blur mustn't work, so blur function mustn't execute. This is my jquery code :
$(document).ready(function(){
$("#comment_textarea").on("keypress blur", function(e) {
if(e.type == "keypress" & e.which == 13){
alert("type: "+e.type+"||which: "+e.which);
}
else if(e.type != "keypress" ){
alert("type: "+e.type+"||which: "+e.keycode);
}
});
})
This code alerts two times. First is blur and second is enter click. Have anyone got any ideas.
Thanks.
Since you show an alert the textarea isn't focused anymore, the blur event will be triggered then.
$(function () {
$("#comment_textarea").on("keydown", function (e) {
if (e.keyCode == 13) {
// do your Enter key stuff
e.preventDefault();
}
});
$("#comment_textarea").on("blur", function (e) {
// handle the blur
});
});
Trying to double up probably isn't the best way.
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
I have an input and an appended button. The click on button calls some function. But I don't want this function to be called when user 'presses enter key'. On the other hand, I want on keyup in this input to call some other function. SO I put
$(document).on('keyup', '#id', function(e){
call();//calling some function
if (e.which == 13 || event.keyCode == 13) {
e.preventDefault();//I also tried to return false
}
});
But it doesn't seem to work, someone has an idea ?
$(document).on('keyup', '#id', function(e){
if (event.keyCode != 13) {
e.preventDefault();
call();//calling some function
}
return false;
});
Try this:
$(document).on('keyup', '#id', function(e){
if (e.which == 13 || e.keyCode == 13) {
e.preventDefault();//I also tried to return false
}else{
call();//calling some function
}
});
Don't use keyup, since the form is send on keydown.
Have you tried switch .call() function to a simple alert(), just for tests purpose. #Oyeme and #Jai code seems to work properly.