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

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

页面代码：

<!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. Java语言的优点

    1)Java为纯面向对象的语言. <Thinking in Java>提到Java语言是一种“Everything is object”的语言,它能够直接反应现实生活中的对象, 例如火车, ...

  2. Extjs 可重用组件开始写 2014 8 23日

    今天开始自己去写组件. 这次写组件重点在于参考cfWeb来写出自己的组件. 首先先把结构做出来. 对于这次的自定义组件,现在所做的事情关键在于上面四个文件.于是将上面四个文件贴出来. MyApp.js ...

  3. Ubuntu下推荐安装软件

    前言:都是全平台软件,通用性好. 1.搜狗输入法 官网下载: 不能双击.deb安装成功,需要安装依赖,可参考:https://www.cnblogs.com/chendeqiang/p/1017741 ...

  4. C# 读取硬盘信息 ManagementClass类

    一.在很多情况下,你可能都需要得到微机的硬件信息.需要加上下面的这句话: using System.Management; 获取硬件信息,需先知道硬件参数信息: Win32_Processor, // ...

  5. Unity3D项目

    Input.mousePosition //鼠标点击的位置 0 左键  1右键  2滚轮 Input.GetMouseButton(0) //当鼠标左键处于按下状态的时候返回True Input.Ge ...

  6. Linux学习日记——源码编译Apache

    [本文为笔者在学习Linux 下的软件安装时,尝试使用源码安装Apache 的过程,事后进行一个小小的总结,发现错误望指正.] 一.典型的源码编译安装软件的过程包括以下3步: 1) 运行 config ...

  7. JS中innerHTML/outerHTML和innerText/outerText以及value 的区别与使用

    value value:value是表单元素特有的属性,输入输出的是字符串 如下面的例子,获取到的是他们的value值 <input type="text" id=" ...

  8. firstChild与firstElementChild

    相同点: 都是获取父元素下的第一个节点对象 不同点: firstChild: IE6.7.8 第一个元素节点; 非IE6.7.8:返回第一个元素节点或文本节点 firstElementChild: I ...

  9. Apache负载均衡配置

    使用mod_proxy 配置Apache负载均衡 1.安装apache ./configure --prefix=/usr/local/apache2 –enable-so make &&am ...

  10. 从DataTable高效率导出数据到Excel

    首先从数据库读取数据到DataTable,这我就不提了,大家都明白.下面直接介绍如何从DataTable高效率导出数据到Excel中的方法,代码如下: using Microsoft.Office.I ...