$("#epFilter").keypress(function(){
query = $("#epFilter").val();
alert(query);
});
In this code, whenever I type in my text box, it always alert one character less. It doesn't catch the last character. Why?
Use the keyup event instead.
$("#epFilter").keyup(function(){
query = $("#epFilter").val();
alert(query);
});
keypress event is triggered when user presses a key, but before the character is inserted. Use keyup event instead.
Slightly improving Matt's answer (using this inside event handler):
$("#epFilter").keyup(function(){
query = $(this).val();
alert(query);
});
I wonder if that is a "normal" behavior. Shouldn't keypress be similar to keydown+keyup (except for the codes and keys)?
I had the same problem. I have an input-text field and I want to calculate a total on keypress. However, it does not change the total until I input again another character (this means when I entered the first digit it didn't update). I used "keyup" and was "fixed", but I think it could be better if I use keypress as it doesn't fire when I press other keys (like Ctrl, Shift, arrows, etc).
According to the documentation Keypress should work as I expected but for some reason it didn't.
This is not exactly an answer (so don't vote for it). Just my contribution.
Related
I'm reading through this section of the guide. I'm testing the complex component in the tutorial.
What I'm not understanding is why these two lines exist together, I believe only the first one should.
fillIn('.list-filter input', 'Seattle');
keyEvent('.list-filter input', 'keyup', 69);
In the first line, we fill in the input field which should automatically trigger a filtering of the results. Why are we adding an extra e to the field (keycode 69)? It's like we're going to search Seattlee (note the two e's at the end). Is the keyEvent method necessary to activate the triggering of the refresh but it actually doesn't print to the input field?
I suppose the keyup event doesn't enter a char. It simply does for its name stands for: fires the key up event. You can press a char on the keyboard and see, that the char is being added before you release the key. I'm sure this is specified somewhere, but I don't know this. My reason is the common sense.
So in order to trigger some functionality in that example, one needs not only to fill the field, but to fire a specific event, to which a js-handler is bound
I'm catching value of an input field:
$('#input').on("keydown", function(){
var city = $(this).val();
console.log(city);
});
When I type 'n' console returns nothing, I type 'ne' it returns 'n', type 'new' it returns 'ne'.
Why is this happening?
It's not catching it late, it's doing what it's supposed to, that is show the letters in console while the key is being pressed. A letter would appear in the input box only after the key has been released, which is why you see it on the next key press.
What you need is the .keyup() event:
$('#input').on("keyup", function(){
DEMO
Use keypress event instead of keydown event.
As my comment states, the keydown event occurs when the key is pressed but before the key value is added to the field. It is possible you may wish to prevent the key being added to the field or to implement some shortcuts, and this event is the opportunity to do so.
For a more complete explanation, read the JQuery Keyboard events section
try this code,hope keyup will work
$('#input').on("keyup", function(){
var city = $(this).val();
console.log(city);
});
The keydown event is sent to an element when the user first presses a key on the keyboard.To determine which key was pressed, examine the event object that is passed to the handler function.
While browsers use differing properties to store this information, jQuery normalizes the .which property so you can reliably use it to retrieve the key code. This code corresponds to a key on the keyboard, including codes for special keys such as arrows.
For catching actual text entry, .keypress() may be a better choice.
try this code,hope it will work for you
$("#input").keyup(function() {
console.log($(this).val());
});
You have to use keyup in order to get what you want
$('#input').on("keyup", function(){
var city = $(this).val();
console.log(city);
});
think this is what you want
I'm using jquery's function keypress for my input field
Now, let's say that I want to know when the user types a letter, if this is the first character in the field. I now use something like:
element.keypress(function(e){
//...
if(elementValue.length()==0){
//Do something
}
}
The problem is when the user selects the text that typed and then presses a key (lets say for the character 'A') that replaces it. Then this code returns the length of the old-(soon to be replaced) text.
I know that I could use keyup instead, but I think I need to stay with keypress because I have to do some checks for the pressed physical keys. (this answer really shows the difference between keyup and keypress in this case)
Any suggestions?
User Paul S. put me in the right direction...
That's what I have now and it works:
element.keypress(function(e){
//...
if(this.selectionStart==0){
//Do something
}
}
This way I detect when a key has been pressed while the caret was just at the beginning of the field.
I have an input box and want to adjust the value when a key is pressed.
'keypress .comment-input': 'onCommentInputKeyBlur',
When a key is pressed, a class is added to the html element to reflect the changes.
onCommentInputKeyBlur: function(ev) {
var $form = $('#comment-submit');
if (ev.which) {
$form.addClass('focused');
} else if (!$(ev.currentTarget).val()) {
$form.removeClass('focused');
}
},
However, this doesn't detect special keys being pressed (ie when a user presses ctrl+v for a paste, it's not detected and the formatting is therefore wrong).
Using keyup and keydown halfway solve the problem, but formatting is wrong for a brief second:
Keydown -> the value isn't supposed to change until an actual value is entered through a keypress, but it changes right when ctrl is hit instead of waiting for the second key
Keyup -> new value is briefly pasted over the previous one while waiting for the key to actually be released.
Is there a better way to about solving this? Ideally, I would like to detect if the key entered does actually produce a value and is not simply a special key.
Look into the onchange event. It is fairly well supported and may solve your problem.
What is the ultimate goal of this functionality? perhaps there is a better approach.
If you insist on doing this via keypress event, then you can simply check event.keyCode and filter out the few keycodes that dont change anything, such as shift, control, alt.
I'm running Django 1.5 and using Dajax/Dajaxice to asynchronously update a form. The form is just a description of an object (text feild). The value of the field is always displayed and is shown as an editable textarea.
When the form is rendered, i assign an onchange event to the html form with javascript:
$('#form_id').change(function(event) {
Dajaxice.appname.description_form(Dajax.process,
{'form':$('#form').serialize(true),
'pk':$('#parent_div').attr('pk')}
)
});
This works with any kind of input except blank input. It seems like the event is not triggered if the textarea does not contain any text; what can I do to allow blank input to trigger the event?
It is not just the onchange event, I tried assigning others such as keyup() etc. with the same results (fully functional except for blank input).
Clarification:
by no input, i mean '' (no characters)
an input of ' ' triggers still.
I remember encountering this before briefly, but some arbitrary changed resolved it.
In its simplest form, jQuery's .change() function should fire for a null input. See this simple example, by entering text in the input, clearing it and tabbing out again: simple .change() demo
$('#search').change(function(event){alert('Changed!');});
If you could provide more context to your code, maybe we could figure out what's causing .change() to fail.
as far as I know, "input" is not the event you want to use. Since "input" is analogous to "change", it tends to produce a bad result when your string approaches 0 chars, use keyup instead
Try this:
$('#form_id').bind('keyup', function (e) {
Dajaxice.appname.description_form(Dajax.process,
{'form':$('#form').serialize(true),
'pk':$('#parent_div').attr('pk')}
)
});