Как запретить пользователю вводить значение с максимальной длиной, используя jQuery

Question

Я хочу, чтобы у пользователя не было возможности вводить текст, если у него в поле ввода более 5 значений, разделенных запятыми.

Я достиг значения, но не уверен. Я думаю, что maxlength Dynami c должен сделать свое дело.

Я пытаюсь применить приведенный ниже код, но не работает -

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 до "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
}