模拟邮箱输入邮箱地址、收藏标签：

文本框输入文字后按回车键或者分号键，输入框中的文字变成小块并带删除按钮和操作。

页面代码：

<!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>

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

  1. input框输入金额显示千分位

    比如输入:1000000,则显示为1,000,000(或者是保留3位小数:1,000,000.000) 知识点: 1)JavaScript parseFloat() 函数: 定义:parseFloat ...

  2. js input框输入1位数字后自动跳到下一个input框聚焦

    // input框输入1位数字后自动跳到下一个input聚焦 function goNextInput(el){ var txts = document.querySelectorAll(el); f ...

  3. js控制input框输入数字时，累计求和

    input框输入数字时,自动开始计算累加 <div class="form-group"> <label for="inputPassword3&quo ...

  4. input框输入手机号码分隔显示

    在input框输入手机号码时,自动加入空格按照3,4,4位显示,如: 实现方法如下: <label>手机号码</label><input type="text& ...

  5. 基于Element-UI的el-table，input框输入实现排序功能

    最终效果如下 实现要求: 如果输入的内容不是非负整数,那么提示报错,并且将值变为输入前的内容: 如果输入正确,则当输入的内容发生改变并且失去焦点以后,触发事件,重新获取列表: 实现思路 使用原生的in ...

  6. input 框输入数字相关

    input框限制只能输入正整数,逻辑与和或运算 有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数字.小数点.英文字母.汉字等代码. 例如,输入大于0的正整数 代码如下: &l ...

  7. JavaScript input框输入实时校验

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  8. 当input框输入到限定长度时，自动focus下一个input框

     需求背景 需要输入一串15位的数字,但是要分为3个输入框,每个输入框限定长度5位,当删除当前输入框的内容时,focus到上一个输入框: 实现方法 var field = $('.phone-fiel ...

  9. autocomplete 属性 清除input框输入存留历史值,防止下拉历史值显示

    autocomplete 属性规定输入字段是否应该启用自动完成功能. 自动完成允许浏览器预测对字段的输入.当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项. 注释:aut ...

随机推荐

  1. .NET Core开发：项目实践

    初始化项目 本来想详细讲一讲dotnet core的,但我对于dotnet core的研究还不到一星期,半吊子,脑子又笨,就不写那些理论出来误人子弟了,还是直接来一篇实践给大家做个参考.废话不多说,直 ...

  2. Hessian Spirng实例

    Spring实例 之前,我们做了很简单的纯Hessian的调用,虽然到此已经能够满足远程调用的需求了,但是我听说spring也能够访问hessian的远程服务,研究了一番,废话不多说,直接上示例. 业 ...

  3. 性能优化实战-join与where条件执行顺序

    昨天经历了一场非常痛苦的性能调优过程,但是收获也是刻骨铭心的,感觉对sql引擎的原理有了进一步认识. 问题起源于测试人员测一个多条件检索的性能时,发现按某个条件查询会特别慢.对应的sql语句简化为: ...

  4. SecurityManager USE

    import java.io.DataInputStream; import java.io.File; import java.io.FileInputStream; import java.io. ...

  5. solarwinds之监控路由器

    配置路由器开启SNMP功能 1.         开启路由器的SNMP功能,并指定两个共同体名   网络扫描 1.         添加一个新扫描      2.         默认下一步     ...

  6. elasticsearch集群安全重启节点

    es2.x 关闭集群的动态分片:(动态分片开启状态如果节点宕机了,会导致集群重新分配数据进行数据转移,会导致节点直接大量传输数据)curl -XPUT 'http://192.168.248.193: ...

  7. 【Python 学习】continue ，break 的使用

    # continue 跳出本轮循环并进入下一次循环# break 终止当前循环,跳出循环体 1. continue 使用案例 : for i in range(5): if i < 3: pri ...

  8. pytorch 8 CNN 卷积神经网络

    # library # standard library import os # third-party library import torch import torch.nn as nn impo ...

  9. Django - 表与ORM操作

    Django - 表与ORM操作 一. 模板语言 模板中也有自己的语言, 该语言可以实现数据展示 - {{ 变量 }} - 循环 {% for i in all_publisher %} {{ for ...

  10. centos7下搭建solr服务器

    1.Solr的环境 Solr是java开发. 需要安装jdk. 安装环境Linux. 需要安装Tomcat. 1.2. 搭建步骤 第一步:把solr 的压缩包上传到Linux系统 第二步:解压solr ...