jquery - 如何通过逗号拆分输入内容并将css应用于每个元素

Question

我有一个文本框，用户在其中输入由 分隔的电子邮件地址， 我想要实现的是设置用户输入的文本的 background-color: green直到 comma，等等 之前的每个文本， 目前它直接将背景颜色应用于文本框，而不仅仅是逗号之前的每个文本的文本本身

 $('.team-btn').click(function() {
  $('.team-intro').replaceWith($(".team-invite").clone().show());

  $('#invite-emails').keydown(function(event) {
    if (event.keyCode === 188) {
      $(this).addClass('foo');
    }
  });

  });          

.foo{
    background-color:#0c0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="team-intro">
            <p>XXXX is a Free to use, Invite your team and get started today</p>
            <button class="team-btn">Invite Now</button>
        </div>

        <div class="team-invite" style="display:none;">
            <p>Enter emails and we will invite your mates to join you.</p>
            <input type="text" id='invite-emails' name='email'  placeholder='enter emails here' size="30">
            <br>
            <!--<div data-value=""  id='style-email' style="padding-left: 12px; padding-right: 12px;">-->
            <p id='subtext'>You can enter multiple emails with comma</p>
        </div>

Answer 1

我会这样做:

$('#invite-emails').tagsInput({
  'width': 'auto',
  'delimiter': ',',
  'defaultText': 'Enter email',
  onAddTag: function(item) {
    $($(".tagsinput").get(0)).find(".tag").each(function() {
      if (!ValidateEmail($(this).text().trim().split(/(\s+)/)[0])) {
        $(this).addClass("badtag");
      }
    });
  },
  'onChange': function(item) {
        $($(".tagsinput").get(0)).find(".tag").each(function() {
      if (!ValidateEmail($(this).text().trim().split(/(\s+)/)[0])) {
        $(this).addClass("badtag");
      }
    });
  }

});

Here is the JSFiddle demo

我使用了 jQuery 标签输入库，然后在旁边添加了电子邮件验证，并编写了用红色突出显示错误电子邮件的类。

我以这种方式实现它，因为您无法在 html 输入和文本区域中突出显示单个文本背景。