如何防止用户使用 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

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

注意：

• 使用拆分"Split a string into an array of substrings"
• 使用切片进行"extracts parts of a string and returns the extracted parts in a new string"
• 使用联接进行"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 2

据我了解，您希望限制为 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" />

Answer 3

您应该使用按键而不是键。

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

Answer 4

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

...
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
}