CODEWITHSUNDEEP
javascriptjquery
Gireesh Doddipalli
Gireesh Doddipalli

Reputation: 490

jquery keypress() events are not working for keyup()

Here is the code for keypress function, which is allowing only numbers http://jsfiddle.net/lesson8/HkEuf/1/

But, for the same keycodes, keyup function is not working. I mean, if I use

$(document).ready(function () {
  //called when key is pressed in textbox
  $("#quantity").keyup(function (e) {
     //if the letter is not digit then display error and don't type anything
     if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
        //display error message
        $("#errmsg").html("Digits Only").show().fadeOut("slow");
               return false;
    }
   });
});

The reason for using keyup is to get the current entered value in the textbox. If I use keyup function, I will get the current value. But, If I use keydown or keypress, I am getting the previous or existing value in the textbox see the updated code with different functions http://jsfiddle.net/dgireeshraju/HkEuf/7300/ this is the example with keydown, which is giving the existing value.

Upvotes: 1

Views: 1966

Answers (2)

bipen
bipen

Reputation: 36531

Key up fires when the user releases a key, after the default action of that key >has been performed.

Keypress fires when an actual character is being inserted in, for >instance, a text input. It repeats while the user keeps the key depressed.

Your code is actaully working in both the cases (you can see the error message atleast ) but since this event are different so is the result. To make it work with keyup you need to empty the input element again since by that time the value has already been entered in input element

   $("#quantity").keyup(function (e) {
    //if the letter is not digit then display error and don't type anything
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
        //display error message
        $(this).val(''); //<--- this will empty the value in the input.
        $("#errmsg").html("Digits Only").show().fadeOut("slow");
        return false;
    }
});

NOTE: However emptying the input does removes the complete value even when there are numbers in it so, I prefer keydown in such cases.

Updated

This is a little hack on input value but (I will still prefer to go with keydown), Use this if you really want keyup to work :). since I am modifying the default browser behaviuor, you might also need to think of lots of other cases here.

$("#quantity").keyup(function (e) {
//if the letter is not digit then display error and don't type anything
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
    //display error message
     if(e.which != 13){ //<--- don't remove when entered is pressed.
        $(this).val(e.currentTarget.value.substr(0, e.currentTarget.value.length - 1));
    }
    $("#errmsg").html("Digits Only").show().fadeOut("slow");
    return false;
}
console.log(e.currentTarget.value);

});

working fiddle

Upvotes: 2

ssilas777
ssilas777

Reputation: 9804

KeyUp fires after the character inserted only, as you can see your function is actually calling and warning message is displaying.

If you try the same code with KeyDown it will work as the event will be called before a character is inserted

//called when key is pressed in textbox
  $("#quantity").keydown(function (e) {
     //if the letter is not digit then display error and don't type anything
     if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
        //display error message
        $("#errmsg").html("Digits Only").show().fadeOut("slow");
               return false;
    }
   });

Upvotes: 2

Related Questions