如何防止用户使用 jQuery 以最大长度输入值

Question

如果用户在输入框中有超过 5 个逗号分隔值，我希望他不能输入文本。

我已经达到了这个值，但不确定。我认为 maxlength 动态应该可以解决问题。

我正在尝试应用以下代码，但不起作用 -

require(["jquery"],function($) {
    $("input.toEmail").keyup(function(e){
        var inputEmail = $("input.toEmail").val();
        var count = (inputEmail.match(/,/g) || []).length;  
        if(count >= 5){
            e.preventDefault();
            e.stopPropagation();
        }
    });
});

Answer 1

这不是经过测试的代码，但您可能明白了。基本上，如果达到限制，您会将输入的内容设置回之前的状态。

...
var inputEmail = $("input.toEmail").val();
var inputLength = inputEmail.length;

...

if (count >= 5) {
    $("input.toEmail").val(inputEmail.substring(0, inputLength - 1); // write back the previous content
}

Answer 2

您应该使用 keypress 而不是 keyup。

$("input.toEmail").keypress(function(e) {
  var inputEmail = $("input.toEmail").val();
  var count = (inputEmail.match(/,/g) || []).length;
  if (count >= 5) {
    e.preventDefault();
    e.stopPropagation();
  }
});

Answer 3

你可以通过这种简单的方式实现它。

注：

使用split到"Split a string into an array of substrings"
使用slice到"extracts parts of a string and returns the extracted parts in a new string"
使用join到"returns the array as a string"

$("input.toEmail").keyup(function(e){
        var inputEmail = $(this).val();
        var strArray = inputEmail.split(/,/g);
     
        if(strArray.length >= 5){
            this.value = strArray.slice(0, 5).join(',');
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input  type="text" class="toEmail"/>

Answer 4

据我了解，您想限制为 6 个逗号限制值，因此它将包含 5 个逗号。我在这里做的是你可以替换最后（第 6 个）逗号这样它就只允许 6 个值。

$(function() {
    $("input.toEmail").keyup(function(e){
       var length_comma = (($(this).val().match(/,/g)||[]).length)
        if(length_comma >= 6){          
          this.value = this.value.replace(/,\s*$/, "");
          e.preventDefault();
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="toEmail" type="text" name="toEmail" />

如何防止用户使用 jQuery 以最大长度输入值

How to prevent User to enter value at maxlength using jQuery

html

php

jquery

maxlength

disabled-input