CODEWITHSUNDEEP
javascriptjquery
Anthony
Anthony

Reputation: 2416

Prevent user from typing in input at max value

I'd like the user to be blocked from typing more if the value is over 100. So far I have the following from reading different posts:

$('.equipCatValidation').keyup(function(e){
        if ($(this).val() > 100) {               
           e.preventDefault();                
        }
    });

To confirm I want the value not the string length, and it can't be above 100.

However this is not preventing further input in the field. What am I missing.

Upvotes: 19

Views: 64100

Answers (7)

Popnoodles
Popnoodles

Reputation: 28409

Checking keyup is too late, the event of adding the character has already happened. You need to use keydown. But you also want to make sure the value isn't > 100 so you do need to also use keyup to allow js to check the value then too.

You also have to allow people to delete the value, otherwise, once it's > 100 nothing can be changed.

<input class="equipCatValidation" type="number" />

When using input type="number", change also needs to be on the event list.

$('.equipCatValidation').on('keydown keyup change', function(e){
    if ($(this).val() > 100 
        && e.keyCode !== 46 // keycode for delete
        && e.keyCode !== 8 // keycode for backspace
       ) {
       e.preventDefault();
       $(this).val(100);
    }
});

http://jsfiddle.net/c8Lsvzdk/

Upvotes: 40

Billi Li
Billi Li

Reputation: 69

<input class="equipCatValidation" />
var maxValue = 100;

jquery

$('.equipCatValidation').on('keypress', function(e){
  /* preventing set value when it doesn't pass conditions*/
 e.preventDefault(); 
 var input = $(this);
 var value = Number(input.val());
 var key = Number(e.key);
 if (Number.isInteger(key)) {
     value = Number("" + value + key);
     if (value > maxValue) {
       return false;
     }
     /* if value < maxValue => set new input value 
     in this way we don't allow input multi 0 */
     $element.val(value);
 }
});

vanilla js

document.querySelector(".equipCatValidation")
 .addEventListener("keypress", function(e) {
  e.preventDefault();
  var input = e.target;
  var value = Number(input.value);
  var key = Number(e.key);
  if (Number.isInteger(key)) {
    value = Number("" + value + key);
    if (value > maxValue) {
      return false;
    }
    input.value = value;
  }
 });

example

addition to the this answer

Upvotes: 1

Sam Carlton
Sam Carlton

Reputation: 1434

Here's a solution for those using modern vanilla Javascript:

Just snap the value back down to the max when the user focuses away from the input.

You would set the input to a number type and the max value

<input type="number" max="100">

and then add a function to the onblur method of the element

document.querySelector('input[max]').onblur = function (event) {
    // If the value is less than the max then stop
    if (Number(event.target.value) < event.target.max) return
    // Snap the value to the max
    event.target.value = event.target.max
}

You can also use oninput instead of onblur but that may cause the user to have to fight the input in certain situations.

Example

Upvotes: 0

Manvinder Singh
Manvinder Singh

Reputation: 160

$('.equipCatValidation').on('keypress', function(e){
    var $element = $(this);
    var value = Number($element.val());
    var key = Number(e.key);

    if (Number.isInteger(key)) {
        value = Number("" + value + key);
    }

    if (value > 100) {
        return false;
    }
});

Upvotes: 0

Md Ashaduzzaman
Md Ashaduzzaman

Reputation: 4038

Basically keypress events are fired before accepting the current value. So when you press on any key, keypress event is subscribed but you don't get the updated value/result for the recently pressed key. So, to get the last pressed key we can use the fromCharCode method and concat it with the value we got from the textbox. That's it,

HTML :

<input id="inputBox" type="text" />

jQuery :

$("#inputBox").on("keypress", function(e){
    var currentValue = String.fromCharCode(e.which);
    var finalValue = $(this).val() + currentValue;
    if(finalValue > 100){
        e.preventDefault();
    }
});

jsFiddle

Upvotes: 6

a5824570
a5824570

Reputation: 11

It is bad UI to disable the input if a user inputs a bad value. I'm assuming you simply want to put a max value that the user cannot go over. If so, you can either clamp the value, or use the max attribute in your markup:

  <form>
    <input type='number' max='100'>
  </form>

If you input an invalid value, the input will turn red, and you cannot submit the form.

Upvotes: 1

Mars Robertson
Mars Robertson

Reputation: 13213

Maybe keydown instead of keyup?

<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

  <script>
  $(function() {

    $('.equipCatValidation').keydown(function(e){
      if ($(this).val() > 100) {            
         e.preventDefault();              
      }
    });

  })
  </script>

</head>
<body>

<input type="text" class="equipCatValidation">

</body>
</html>

EDIT: There is a valid comment here - Prevent user from typing in input at max value - to circumvent that you should probably store the previous value and restore it when necessary.

Upvotes: 2

Related Questions