如何用逗号分割输入内容并将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");
      }
    });
  }

});

这是JSFiddle演示

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

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