Question

我正在尝试对使用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>

Answer 1

如果要在其他脚本创建的元素上共享相同的功能，可以使用$('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>

Answer 2

我为您创建了一个示例fiddle。如@darklightcode所述，您应该使用这样的选择器$('body').on( events, selectors, callback)，但是您还需要绑定输入事件而不是keydown，并且还需要其他检查重复的texarea字段。希望对您有帮助

如何使用jQuery在每个重复的字段上添加限制

2 个答案: