防止用户以最大值输入输入答案

【问题标题】：Prevent user from typing in input at max value防止用户以最大值输入输入
【发布时间】：2014-06-17 18:50:41
【问题描述】：

如果值超过 100，我希望阻止用户输入更多内容。到目前为止，我通过阅读不同的帖子获得了以下信息：

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

确认我想要的不是字符串长度，并且不能超过 100。

但这并不妨碍在该字段中进一步输入。我错过了什么。

【问题讨论】：

你的意思是值还是字符串长度？
请认真考虑这是否是个好主意。如果用户键入的值是>100，那么他们就无法再编辑它了。甚至没有做到<100。
马特说得很好。
将该部分替换为：$(this).val().length
为什么不用maxlength 属性。

标签： javascript jquery

【解决方案1】：

检查keyup为时已晚，添加字符的事件已经发生。你需要使用keydown。但是您还想确保该值不 > 100，因此您还需要使用 keyup 来让 js 也检查该值。

您还必须允许人们删除该值，否则，一旦大于 100，则无法更改。

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

使用 input type="number" 时，更改也需要在事件列表中。

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

【讨论】：

该值不能超过 100。因此如果用户输入 101，应防止输入更多文本。很好的删除和退格调用，但我仍然可以输入超过 100 的值。
e.keyCode != 46 和 e.keyCode != 8 在移动设备上的行为是否相同？
@Anthony 移动设备，您正在查看网页，当然是。
我试图通过将条件 "$(this).val() > 100 " 更改为 "$(this).val()
您应该为TAB键添加键码（切换到下一个输入），以防有多个数据输入字段。

【解决方案2】：

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

【讨论】：

【解决方案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 - 以规避您可能应该存储以前的值并在必要时恢复它。

【讨论】：

【解决方案4】：

如果用户输入了错误的值，则禁用输入是错误的 UI。我假设您只是想设置一个用户无法超过的最大值。如果是这样，您可以限制该值，或在标记中使用 max 属性：

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

如果输入无效值，输入会变成红色，无法提交表单。

【讨论】：

这很好，但是如果浏览器不支持type=number，它将变成一个文本字段，并且没有什么可以阻止不想要的结果。也许使用这个和一个 js 插件将这个功能添加到那些不支持它的浏览器是正确的方法。
用户可以在框中输入任何内容。

【解决方案5】：

<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

【讨论】：

【解决方案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;
    }
});

【讨论】：

请解释一下你的答案。只有代码不是问题

【解决方案7】：

对于那些使用现代 vanilla 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

【讨论】：