Question

如果值超过100，我希望阻止用户输入更多内容。到目前为止，我在阅读不同帖子时有以下内容：

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

确认我希望值不是字符串长度，并且不能超过100。

然而，这并不妨碍该领域的进一步投入。我错过了什么。

解决方案：http://jsfiddle.net/9TP3e/

Answer 1

检查keyup为时已晚，添加角色的事件已经发生。你需要使用keydown。但你也想确保价值不是＆gt; t＆gt;因此你也需要使用keyup来允许js检查值。

您还必须允许其他人删除该值，否则，一旦＆gt; s＆gt; 100什么都不能改变。

$('.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/EBs33/1/

Answer 2

在接受当前值之前，基本上会触发按键事件。因此，当您按任意键时，会按订阅按键事件，但您没有获得最近按下的键的更新值/结果。因此，要获取最后一个按下的键，我们可以使用 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

Answer 3

可能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>

编辑：这里有一个有效的评论 - Prevent user from typing in input at max value - 规避你应该存储以前的值并在必要时恢复它。

Answer 4

如果用户输入错误值，则禁用输入是错误的UI。我假设你只是想放一个用户不能过的最大值。如果是这样，您可以限制值，或使用标记中的max属性：

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

如果输入的值无效，则输入将变为红色，并且您无法提交表单。

Answer 5

回应上面的Popnoodles答案，

使用类型安全的相等运算符===和！==而不是它们的常规副本==和！=在Javascript中它可以/可能导致意外的类型强制被认为是一种好的做法。< / EM> 所以它应该是

$('.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); } });

Answer 6

$('.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;
    }
});

Answer 7

以下是使用现代香草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，但是在某些情况下，这可能会导致用户不得不打败输入。

Example

Answer 8

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

example

添加到this answer

阻止用户输入最大值的输入

8 个答案: