Don't allow to reach higher than 9999 on an input?

Question

$(document).on('keyup keydown',function(key){

    if(key.which >= 48 && key.which <= 57 && $('#sell').val() >= 9999 ) {
        return false;
    }
    else {
        if(key.which >= 48 && key.which <= 57 && $('#sell').val() <= 9999 ) {
            return true;
        }
    }
});

Basically what I want to do is prevent someone from reaching higher than 9999 on an input.

But the problem is that if they type "55555" it would go through.

They couldn't type any higher than that and could delete it, but I don't want them to get higher than 9999.

Does anyone have a solution?

EDIT:

I need to somehow also prevent the input from working if it detects a higher number.

Try something like this:`` – whatthefish Apr 05 '18 at 17:07 — whatthefish, Apr 05 '18 at 17:07
Is that Jquery... Is that JavaScript? Looks like HTML to me – Carter.P Apr 05 '18 at 17:08 — Carter.P, Apr 05 '18 at 17:08
Maybe try converting `val` to an int? `+$('#sell').val()` – Jorjon Apr 05 '18 at 17:11 — Jorjon, Apr 05 '18 at 17:11

kshetline · Answer 1 · 2018-04-05T18:12:17.280

You could try something like this:

let sell = $('#sell');
let lastVal = 0;

sell.on('keyup keydown', function(key) {
  let cc = key.which;
  return (cc <= 57 && cc !== 32);
});

sell.on('input', function(evt) {
  const newVal = sell.val();

  if (newVal < 0 || newVal > 9999) {
    sell.val(lastVal);
  }
  else {
    lastVal = newVal;
  }
});

Note that this only captures key events on the input itself, not the whole document. While this limits the user to typing digits (character below 48 (except space) are allowed because those are things like arrow keys and backspace), more work would be needed if you wanted to allow the user to perform actions like copy and paste.

The reason for not testing the val() of the input in the key event handler is a matter of timing: The key down event doesn't change the value of the input field, and the key up event comes after the value has been updated and it's too late to prevent the value change.

What this code does instead is let the value momentarily go out of range, but immediately reset it to the last valid value when that happens.

Plunker here: http://plnkr.co/edit/xsVQG1EzsDLMt8POCJUX?p=preview

Sure! I hate when something like this happens without any explanation. — Eliellel, Apr 05 '18 at 23:07

score 0 · Answer 2 · answered Apr 05 '18 at 18:01

Try this:

 
 var lastVal;

  $("#sell").on('keydown', function(e){ 
      if(e.which === 8){ // allow backspace
          return;
      } else if((e.which < 48 || e.which > 57) && (e.which < 96 || e.which > 105) ) { //only allow numbers & num pad numbers
          return false;
      } 
      if(e.target.value <= 9999) lastVal = e.target.value; //prevent key holding
  });
  
  $("#sell").on('keyup', function(e){ 
      if(e.target.value > 9999){
         e.target.value = lastVal;
         return false;
      }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id=sell />

I got an unexplained down vote too. I'll up-vote your if you up-vote mine. :) — kshetline, Apr 05 '18 at 22:59

score -1 · Answer 3 · edited Apr 05 '18 at 19:16

Make the max length equal to 4 in HTML and use JS to force integer type, put max on input to prevent higher than 9999... Or do it manually for all of it . Up to you

With JS... on keydown: Strip non integers

if($("#inputID").val().length > 4){ KILL EXTRA LETTERS }

Once done.

If ($("#inputID").val() > 9999){ $("#inputID").val(9999); }

Remember, if this is for a form to validate the answer on the server side so the client can't override HTML and JS checks.

Don't allow to reach higher than 9999 on an input?

3 Answers3