Как добавить ограничение на каждое дублированное поле, используя jquery - PullRequest
Новая
       9

Как добавить ограничение на каждое дублированное поле, используя jquery

0 голосов
/ 20 ноября 2018

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

Это код, который у меня есть до сих пор.Кто-нибудь, кто может помочь?Я ценю это, ребята.Спасибо! 

$('.itextarea').each( function(){
    $(this).on('keyup', function() {
        var words = this.value.match(/\S+/g).length;

        if (words > 5) {
          var trimmed = $(this).val().split(/\s+/, 5).join(' ');

          $(this).val(trimmed + ' ');
          $('p.help').empty().append('You can only add 5 words per field.');
        }else{
          $('p.help').empty();
        }

    });
});

ОБНОВЛЕНИЕ: Извините, вот HTML для тех, кто его просил. 

<textarea class="itextarea form-control" name="id_desc[]" aria-required="true"></textarea>

Ответы [ 2 ]

0 голосов
/ 20 ноября 2018

Я создал образец скрипка для вас.Как упомянуто @darklightcode, вы должны использовать такой селектор $('body').on( events, selectors, callback), но вам также нужно связать событие ввода вместо нажатия клавиши, а также вам понадобится дополнительная проверка дублированных полей texarea.Надеюсь, это поможет вам

0 голосов
/ 20 ноября 2018

Если вы хотите использовать те же функции для элементов, созданных другими сценариями, вы можете получить к ним доступ, используя $('body').on( events, selectors, callback): 

$('#add-field').on('click', function() {

  $('#banner-message').append(`<input class="itextarea" />`);

})

// This is how you should access dynamically added elements
$('body').on('keyup', '.itextarea', function() {
  var words = this.value.match(/\S+/g).length;

  if (words > 5) {
    var trimmed = $(this).val().split(/\s+/, 5).join(' ');

    $(this).val(trimmed + ' ');
    $('p.help').empty().append('You can only add 5 words per field.');
  } else {
    $('p.help').empty();
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
  <button type="button" id='add-field'>
  Add New Field
  </button>
  <input class="itextarea" />
</div>
...