Why my condition is not satisfied?

Question

I have a textbox and i want to allow users only enter 4 digits as i want to take time from the user, but i am facing the strange problem in condition.

Fiddle Demo

Javascript

function CheckLength(val, key) {
      var keycode = (key.which) ? key.which : key.keyCode;
      if(!(keycode == 8 || keycode == 46) && (keycode < 48 || keycode > 57))
         return false;
      if (val.length < 4)
         console.log(val);
      else
         return false;
}

HTML Markup

 <input type="text" id="timepick" onkeyup="return CheckLength(this.value,event);"  />

Can anyone help me? why this is happening?

Thanks for your precious time.

Answer 1

You could listen for a "keydown" event instead of "keyup" Heres your Fiddle, (i only changed up to down). , or remove the last entered key by resetting the value in the "keyup" event.

document.getElementById("timepick").addEventListener("keyup", function (e) {
    var keycode = (e.which) ? e.which : e.keyCode;
    if (e.target.value.length <= 4) console.log(e.target.value)
    if (!(keycode == 8 || keycode == 46) && (keycode < 48 || keycode > 57) || e.target.value.length > 3) 
        e.target.value = e.target.value.substr ( 0,4)
});

Like in this Fiddle

Or you could use 2 seperate events, one "keydown" to prevent the input, and a keyup to read the value

document.getElementById("timepick").addEventListener("keydown", function (e) {
    var keycode = (e.which) ? e.which : e.keyCode;
    if (!(keycode == 8 || keycode == 46) && ((keycode < 48 || keycode > 57) || e.target.value.length > 3) e.preventDefault()

});
document.getElementById("timepick").addEventListener("keyup", function (e) {
    if (e.target.value.length == 4) console.log(e.target.value)
});

Like in this Fiddle

Update, regarding your comment You could, of course use only a "keydown" event, and build the value you want on your own.

document.getElementById("timepick").addEventListener("keydown", function (e) {
    var keycode = (e.which) ? e.which : e.keyCode;
    if (!(keycode == 8 || keycode == 46) && ((keycode < 48 || keycode > 57) || e.target.value.length > 3)) e.preventDefault()
    if (e.target.value.length == 3) console.log(e.target.value + String.fromCharCode(keycode))

});

Like in this Fiddle

Answer 2

Hope this helps you. It prevents more than 4 values and shows the 4 entered into the log (in the fiddle I change the console.log by an alert).

I solved it by storing the 4 values into a variable and if the user enters more than 4 values restore the textbox value with the variable value:

http://fiddle.jshell.net/6czXu/7/

var vals; 

function CheckLength(val, key) {
   var keycode = (key.which) ? key.which : key.keyCode;

   if (val.length < 5){
     alert(val);
     // Here store the 4 values
     vals = val;
     if((keycode == 8 || keycode == 46) && (keycode < 48 || keycode > 57))
       return false;
     }
     else{
        // Here we have more than 4 digits entered so
        // we restore the prevously stored into vals
        document.getElementById("timepick").value = vals;
        return false;
     }
 }

Answer 3

Use the onkeypress event instead and everything should work fine. onkeyup is to late.

<input type="text" id="timepick" onkeypress="return CheckLength(this.value,event);"  />