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

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

页面代码：

<!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. jquery中命名冲突问题

    例如用jq代替$符号 var jq = $.noConflict()

  2. HTML、CSS和JS中注释类型的总结

    添加必要的注释,是一个优秀的程序员必须具备的好习惯,可以大大提高代码的可维护性.可读性. 1.HTML注释 <!--注释的内容--> 注释的地方(根据个人习惯可能有所不同): 结束标签的后 ...

  3. 15.Linux的文件结构

    linux的文件结构和windows不同,没有分区,是树形的结构: /etc:存放配置文件 /lib:编译程序需要的函数库 /usr:包含所有其他内容,比如内核在/usr/src中,/usr/bin存 ...

  4. 移动端H5页面编辑器开发实战--原理结构篇

    很久前的写的文章了,转载下发到这里 原文地址: https://blog.csdn.net/tech_meizu/article/details/52288797

  5. category与协议的不同

    1,category是针对类进行扩展,而且该类必须有里面的所有成员 协议不同可以选择性实现 2,category是针对一个具体的类实现,其他类没有 协议允许任何类使用,只要实现以后只能通过重写修改 3 ...

  6. Spark Streaming概念学习系列之SparkStreaming运行原理

    SparkStreaming运行原理 Spark Streaming不断的从数据源获取数据(连续的数据流),并将这些数据按照周期划分为batch. Spark Streaming将每个batch的数据 ...

  7. 1.Thinkphp入门--框架介绍

    1.Thinkphp款家最早诞生于2006年初,最初名叫fsc,2007年元旦改名thinkphp,由国人自主开发的框架,有中文的文档和社区 2.Tinkphp下载: 官网:http://www.th ...

  8. MeayunDB-高性能分布式内存数据库

    MeayunDB(www.meayun.com)是一款分布式的NoSQL列式内存数据库,由C#编写,主要为高性能,高并发,高可伸缩及大数据系统提供技术解决方案.基于MeayunDB,可以简单,快速的构 ...

  9. 路飞学城Python-Day36

    24-记录的增删改查 1. 插入完整数据(顺序插入) 语法一: INSERT INTO 表名(字段1,字段2,字段3…字段n) VALUES(值1,值2,值3…值n);   语法二: INSERT I ...

  10. BZOJ 2806 [Ctsc2012]Cheat (后缀自动机+二分+单调队列+dp)

    题目大意: 给你一堆模式串和文本串 对于每个文本串,我们可以把它不可重叠地拆分成很多子串,如果拆分出的串作为子串出现在了任何一个模式串中,我们称它是“眼熟的”,我们必须保证“眼熟的”子串总长度不小于文 ...