Fire event on hit enter and change - javascript

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/

Related

disable the "enter" key in a form if the field is not valid

how to disable the "enter" key who give us the possibility to valid and send the form if the field is not valid ?
I only did the first part, which indicates that the field is not valid, but the "enter" key is always active . So my question is simple, how to disable the "enter" key button from the moment we see the "error-message" under the field
here is my test page ->
http://500milligrammes.com/facticemagazine/final/unsubscribe/
I've checked your website, to achieve what you asked for:
$("#name").on("keydown", function(e) {
if(e.which === 13 && $("#name").next(".error-message").is(":visible")) {
e.preventDefault();
return false;
}
});
The submit is always send on keydown, so we need to add a keydown event handler.
Next is to check if the key was the enter key e.which === 13 and after that we just need to check if the error message is shown or not $("#name").next(".error-message").is(":visible").
If both conditions are true then just prevent the default action (submit) by calling e.preventDefault();
You can further improve this by also checking if the input is empty or not before accepting the enter key. The first keydown might be the enter key.
$("#name").on("keydown", function(e) {
if(e.which === 13) {
if($("#name").next(".error-message").is(":visible") || !$("#name").val()) {
e.preventDefault();
return false;
}
}
});
You can check it using the keycode value (13) of enter key.
Something like the following should do:
$('form').on('keyup keypress', function(e) {
if (e.which == 13) {
if (!isValid()) { // your validation function
e.preventDefault();
return false;
} else {
$(this).submit();
}
}
});
Try adding this when you show the error:
$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
if(e.which == 13) {
e.preventDefault();
return false;`enter code here`
}
});

Allowing Enter Key and Click Function to both run

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);
});

Jquery how to split blur and enter key

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.

Jquery key press event not triggered on enter

$("#username,#password").keypress(function(e)
{
//alert('');
if(e.keyCode == 13)
{
signIn();
}
});
The keypress event not calling if the enter button is pressed.
Try using keyUp event.
Live Demo
$("#username,#password").keyup(function(e){
//alert('');
if(e.keyCode == 13)
{
signIn();
}
});
This is also working with keypress
Live Demo
$("#txt1").keypress(function(e) {
if (e.keyCode == 13) {
//signIn();
alert("keypress");
}
});​
Key down is more appropriate:
$("#username,#password").keydown(function(e){
if(e.keyCode == 13)
{
signIn();
}
});
Use e.which instead of e.keyCode because this is what jQuery guarantees to be on event
Try e.preventDefault(), because without it (if they are in a form) the form submits
Maybe the best would be listening on form's submit event
Are you sure it's not the signIn (); function that's faulty? Because this seems to work just fine; http://jsfiddle.net/vDkBs/1/
Use keypress and which statement:
$("#username,#password").keypress(function(e) {
if (e.which == 13) {
//call here your function
}
});

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');
};
});
};

Categories