Javascript 突出显示输入标记中的每个电子邮件

所以，我要对输入标签做的是在其中插入尽可能多的电子邮件地址

      <input type="text" name="email-tags"/>

为了让它更方便用户，我想突出显示每封电子邮件，它是用蓝色在里面键入的，它看起来像一个问题中的标签，也有x按钮删除标签

有人能帮我如何使用javascript吗

---

提前谢谢

这段代码实际上满足了您的需要。它相当先进。我希望它适合你的需要

document.getElementById（“test”）.value

包含本例中数组中的电子邮件地址

函数setInputEmailToExtendedInput（）
{
var inputs=document.queryselectoral（“输入[数据类型='email']”）；
Array.prototype.slice.call（输入）.forEach（函数（元素）{
var node=newemailInput（）；
if（element.id）
{
node.container.id=element.id；
}
if（element.className）
{
node.container.className=element.className；
}			
element.parentElement.replaceChild（node.container，element）；
});
}
函数emailInput（）{
this.container=document.createElement（“div”）；
this.container.input=document.createElement（“输入”）；
this.container.input.type=“text”；
this.container.style.overflowY=“自动”；
this.container.input.className=“电子邮件输入”；
this.container.appendChild（this.container.input）；
this.container.input.addEventListener（“keydown”，checkKeyUpOnEmailInputDisable（this），false）；
this.evaluateTag=evaluateMailFunction；
this.deleteTag=deleteEmailFunction；
this.container.input.addEventListener（“粘贴”，emailEvaluateOnChange（this），false）；
Object.defineProperty（这个“值”{
值：[]，
可枚举：false
});
Object.defineProperty（这是“占位符”{
get:function（）{
this.container.input.placeholder；
},
设置：函数（值）{
this.container.input.placeholder=值；
},
可枚举：false
});
}
功能emailEvaluateOnChange（obj，e）{
返回函数（e）{
目标评估表（如目标值）；
}
}
函数checkKeyUpOnEmailInputDisable（obj，e）{
返回函数（e）{
if（e.keyCode==13 | | e.keyCode==32）//输入或空格
{
目标评估表（如目标值）；
返回false；
}else如果（e.keyCode==8）//退格
{
如果（e.target.value.length==0&&obj.value.length>0）//输入的长度为零。
{
//删除标签。
obj.deleteTag（）；
返回true；
}
}如果（e.keyCode==27）//则为else
{
//隐藏输入辅助对象并模糊输入。
e、 target.blur（）；
e、 预防默认值（）；
返回false；
}
};
}
函数deleteMailFunction（标记）{
如果（！标记）{
//删除最后一个标记
var tag=this.value.length-1；
}
this.container.removeChild（this.container.queryselectoral（“.email_元素”）[tag]）；
该值拼接（标签1）；
如果（this.value.length>0）{
var marginNode=parseInt（getComputedStyle（this.container.children[0]）.getPropertyValue（“右边距”）；
var width=parseInt（this.container.children[0].offsetLeft）*2；//默认填充
对于（变量i=0；i
div.email\u生成器{
宽度：500px；
高度：36px；
背景色：#ffffff；
边框：1px实心#777777；
框大小：边框框；
}
input.email\u输入{
填充：8px 8px 8px 8px；
边框：0px实心透明；
宽度：100%；
框大小：边框框；
字号：11pt；
}
span.u元素{
显示：内联块；
填充：6px 2px 6px 2px；
保证金权利：4px；
颜色：#0059B3；
字号：10pt；
空白：nowrap；
光标：指针；
框大小：边框框；
}
span.email\u元素>span.email\u删除\u按钮{
颜色：#000000；
字号：10pt；
空白：nowrap；
光标：指针；
左侧填充：12px；
字体大小：14px；
字体大小：粗体；
}
span.email\u元素>span.email\u删除\u按钮：悬停{
颜色：#660000；
字号：10pt；
空白：nowrap；
光标：指针；
左侧填充：12px；
字体大小：14px；
字体大小：粗体；
}

这个怎么样：

    <from id="form" action="">
<span id="emailInput">
    <input type="text" name="email-tags"/>
</span>
    <span id="test"></span>
</form>

function isValidEmail(email) {
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
} 
$(function(){
    $('input').keydown(function(event){
        $input = $(this);
        $emailInput = $("#emailInput");
        $("#test").html(event.which);
        switch(event.which){
            //stop for "," ";" and " "
            case 188:
            case 186:
            case 32:
               currentEmail = $.trim($input.val());
               if(isValidEmail(currentEmail)){    
                   $address = $("<span>");
                   $address.addClass("emailAddress");
                   $address.text(currentEmail);
                   $close=$('<span>');
                   $close.addClass("close").text("x");
                   $address.append($close);
                   $input.val("");
                   $input.before($address); 
               }
        }
    });

    $("#emailInput").on("click",".close",function(){
        $(this).parent().remove();
    });
});


功能isValidEmail（电子邮件）{
变量re=/^（（[^（）[\]\\，；：\s）@\