模拟邮箱输入邮箱地址、收藏标签。input框输入内容后回车，内容显示成小方块并带删除按钮。

模拟邮箱输入邮箱地址、收藏标签：
文本框输入文字后按回车键或者分号键，输入框中的文字变成小块并带删除按钮和操作。
页面代码：
<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%
    String ctxPath = request.getContextPath();
    request.setAttribute("ctxpath", ctxPath);//项目根路径
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="${ctxpath}/js/jquery-1.11.3.min.js"></script>
<%-- <link href="${ctxpath}/css/main.css" rel="stylesheet"> --%>
   <title>首页</title>
<style type="text/css">
div.tagsinput{
    border: 1px solid gray;
    width: 500px;
}
div.tagsinput span.tag {
    border: 1px solid #a5d24a;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    display: block;
    float: left;
    padding: 5px;
    text-decoration: none;
    background: #cde69c;
    color: #638421;
    margin-right: 5px;
    margin-bottom: 5px;
    font-family: helvetica;
    font-size: 13px;
}

div.tagsinput span.tag {
    padding: 0;
    margin: 2px 2px;
    background-color: #a7cced;
    border-color: #a7cced;
}
div.tagsinput span.tag>span{
    color: #247dd2;
    padding-right: 5px;
}

div.tagsinput span.tag a {
    font-weight: bold;
    color: #82ad2b;
    text-decoration: none;
    font-size: 11px;
}

div.tagsinput span.tag a {
    margin-right: 3px;
    color: #247dd2;
    font-size: 16px;
}

#headTitle img{
    width: 150px;
    height: 50px;
}

#tagInput{
    width: 498px;
    border: none;
    height: 25px;
}
</style>
<script type="text/javascript"> 
$(function(){
    //输入内容回车、分号后显示处理
    $('#tagInput').bind('keyup',function(event){
        if(event.keyCode == "13" || event.keyCode == "186") {
            if($("#tagInput").val() == ""){
                return false;
            }
            var value = $("#tagInput").val();
            //去掉分号
            value = value.replace(/;/g,"");
            var inputDiv = $("#inputDiv");
            //onclick='del(this)' 此处不适用在标签里面加函数,而是使用标签绑定click事件。
            var str = "";
            str += "<span class='tag'>";
            str +=     "<span>";
            str +=         ""+value+"";
            str +=     "</span>";
            str +=     "<a href='#' title='Removing tag' >x</a>";
            str += "</span>";
            //inputDiv.before("<span class='tag'><span>"+$("#tagInput").val()+"&nbsp;</span><a href='#' title='Removing tag' >x</a></span>");
            inputDiv.before(str);
            
            $("#tagInput").val("");
        }
        
    });
    /* $("div.tagsinput span.tag a").bind("click",function(e){
        alert("c");
    }); */
    /* var del = $("div.tagsinput span.tag a");
    debugger; */
    /* $("div.tagsinput span.tag").bind("click",function(){
        alert("这个段落被点击了。");
    }); */
    /* $("a").click(function(){
        alert("aa");
    }); */
    //删除标签删除操作。只有.on方式绑定事件在新添加的html元素中才起作用。
    $("#tagInputDiv").on("click","a",function(){
        $(this).parent(".tag").remove();
    });
});
/* function del(param){
    $(param).parent().remove();
} */
</script>
</head>
<body>
<h1 id="headTitle">一直在模仿从未被超越<img alt="腾讯官网" src="${ctxpath}/img/tencentLogo.jpg"></h1>
<table>
    <tr>
        <td>
            仿<font color="red">博客园</font>[收藏标签]☺
        </td>
    </tr>
    <tr>
        <td>标签：</td>
        <td>
            <div id="tagInputDiv" class="tagsinput">
                <!-- <span class="tag"><span>12211221&nbsp;</span><a href="#" title="Removing tag">x</a></span> -->
                <div id="inputDiv">
                    <input id="tagInput" type="text">
                </div>
            </div>
        </td>
    </tr>
</table>
</body>
</html>