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

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

页面代码：

<!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. 杂项-电信：TL9000

    ylbtech-杂项-电信:TL9000 TL9000是电信业质量体系要求(书1)与质量体系法则(书2)的指南, 它包括ISO9001的所有要求,以及硬件.软件, 服务方面行业的特别要求. 这些新增要 ...

  2. PHP substr() 函数截取中文字符串乱码

    用PHP substr() 函数截取中文字符串乱码,换PHPmb_substr() 函数即可

  3. LVS（Linux Viretual Server） 负载均衡器 + 后端服务器

    ##定义: LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统. ##结构: 一般来说,LVS集群采用三层结构,其主要组成部分为: A.负载调 ...

  4. 列表查询组件代码, 简化拼接条件SQL语句的麻烦

    列表查询组件代码, 简化拼接条件SQL语句的麻烦 多条件查询

  5. GFM(GitHub Flavored Markdown)与标准Markdown的语法区别

    没有就自己造 其实这篇文16年底的时候就写好的,只不过当时是记在自己的笔记上(没错,我笔记大多记在本地,比发表的这寥寥几篇那是多的多的多了

  6. day09-1 列表，元祖的内置方法

    目录 列表类型的内置方法 作用 定义方式 方法 优先掌握 需要掌握 储存一个值or多个值 有序or无序?(有序:有索引, 无序:无索引) 可变or不可变(可变:值变id不变,不可变:值变id也变) 元 ...

  7. 操作mysql操作数据库

    操作数据库 查询数据库:show databases: 增加数据库:create database student default character set uft-8:(设置默认字符集) 删除数据 ...

  8. Day 04 [与用户交互，格式化输出，基本运算符]

    Python 的与用户交互 name=input("请输入姓名:") height=input('请输入身高:') weight=input('请输入体重:') 在python3中 ...

  9. input上传文件获取文件后缀名+select通过text选中option

    1.input获取后缀名 var fileName = $("input[type='file']").val();//获取上传的文件(单个) var extName = file ...

  10. Spark作业执行

    Spark中一个action触发一个job的执行,在job提交过程中主要涉及Driver和Executor两个节点. Driver主要解决 1. RDD 依赖性分析,生成DAG. 2. 根据RDD D ...