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

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

页面代码：

<!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. (转)IOS http请求的get 和 post的请求的区别

    从表面的意思看get 和 post的区别get就是获取数据,post就是发送数据.这个是误区.其实两者都可以的,在IOS向服务器发送请求里面可以带参数. 那么这些误区是怎么出现的呢?先看看一下对htt ...

  2. Winform WPF 窗体显示位置

    WinForm 窗体显示位置 窗体显示的位置首先由窗体的StartPosition决定,FormStartPosition这个枚举值由如下几种情况 // 摘要: // 窗体的位置由 System.Wi ...

  3. c/s winform打包和部署

    1:vs2010新建  安装项目  左边出现3个文件夹 2:点击 第一个文件夹-> “应用程序文件夹”    将 bin 目录下的所以文件  拖进 右边的空白处:c:\windows\syste ...

  4. Java高级——交通灯管理系统

    本方法模拟了现实生活中的交通信号灯的情况 1.先构建Road类,此类可以创建12个方向的路 代码如下: package com.springtie.traffic; import java.util. ...

  5. 关于PHP函数

    从这里我开始聊一些php相关的东西了,因为视频教程里并没有讲到过多的JS,JQ,XML和AJAX,这些在后续自学之后再写一些: 有关php的基本语法数据类型什么的就不做介绍了,在PHP手册或各大学习网 ...

  6. Java NIO（一）概述

    说明 java NIO是从java1.4开始引入的一个新的IO API,它支持面向缓冲区,基于通道的IO操作,它的核心是通道(channel),缓冲区(buffer),选择器(selector) NI ...

  7. Unity的SendMessage方法

    用法(该对象所有脚本都能收到): gameObject.SendMessage("要执行的方法名"); 通知的另一种实现: gameObject.GetComponent<脚 ...

  8. JTree知识小点

    创建一个新节点 DefaultMutableTreeNode newNode = new DefaultMutableTreeNode("新节点"); 被选中的节点 Default ...

  9. libvirtd.service

    [root@kvm-server ~]# systemctl status libvirtd.service ● libvirtd.service - Virtualization daemon Lo ...

  10. webstorm注册码注册

    最近jetbrains公司更新软件总是特别的快,很多私人搭建的server服务也失效了,现出一个能够永久破解的方法,非常简单,只需要2步就完成. 第一步 复制下方activation code,直接粘 ...