All geek questions in one place

Prevent user from entering input at maximum value

I would like the user to be prohibited from printing more if the value exceeds 100. So far I have the following when reading different posts:

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

For confirmation, I want the value not to be a string length, and it cannot be more than 100.

However, this does not prevent further input to the field. What am i missing

+8
source share
8 answers

The keyup check is too late, the character addition event has already occurred. You need to use keydown. But you also want to make sure that the value is not> 100, so you also need to use keyup so that js can also check the value.

, , > 100, .

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

$('.equipCatValidation').on('keydown keyup', 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/wvye2u0t/

+24

. , , , / . , , fromCharCode , . ,

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

+5

keydown 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: - - , , , , .

+2

, . , , . , , max :

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

, , .

+1

Popnoodles ,

=== ! == == ! =, Javascript / .

    $('.equipCatValidation').on('keydown keyup', function(e){
    if ($(this).val() > 100 
        && e.keyCode !== 46 // keycode for delete
        && e.keyCode !== 8 // keycode for backspace
       ) {
       e.preventDefault();
       $(this).val(100);
    }
});
0
$('.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;
    }
});
0

, Javascript:

, .

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

onblur

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
}

oninput onblur , .

0
<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);
 }
});

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;
  }
 });

addition to this answer

0
source

Source: https://habr.com/ru/post/1544973/

More articles:


All Articles