jQuery实现的Email中的收件人效果（按del键删除）

除以下代码外，再导入个jquery-1.4.4.min.js文件 ，代码中收件人是写死的("ABC", "ABCDEF", "BCDEF")，已测试通过！


代码如下:

<%@ page language="java" import="java.util.*" pageencoding="utf-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="Cache-Control" content="no-cache">
<title></title>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<style>
.clickcss a:link
{
text-decoration: none;
}
.clickcss a:hover
{
background-color: #CCCCCC;
}
.clickcss a:active
{
background-color: blue;
}
</style>
<script language="javascript" type="text/javascript">
$(document).ready(
function() {
$(document).keydown(
function(event) {
if (event.keyCode == 46) {
var containner = $("#div1 span").eq(0);
containner.find("a").each(function() {
if ($(this).css('background-color') == 'blue') {
$(this).remove();
}
});
if (containner.find("a").length == 0) {
containner.css("width", "0");
}
}
});
});
function check() {
//<%=value %>
var array = new Array("ABC", "ABCDEF", "BCDEF");
var result = null;
var aobject = null;
var value = $("#input1").val();
var containner = $("#div1 span").eq(0);
if (value == "") {
alert("请输入收件人名称！")
}
else {
result = new Array();
for (var i = 0; i < array.length; i++) {
if (contains(array[i], value, true)) {
result.push(array[i]);
}
}
if (result.length == 0) {
alert("不包含当前输入的收件人信息，请重新输入！");
}
else if (result.length == 1) {
alert("添加一个收件人！");
containner.css("width", "100%");
containner.append("<a href='javascript:' >" + result[0] + ";</a>");
}
else if (result.length > 1) {
alert("有" + result.length + "个匹配信息，弹出选择对话框选择！");
// window.open("dialog.html", "请选择", "height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no,alwaysRaised=yes,z-look=yes");
window.open("dialog.html");
}
}
}
function contains(string, substr, isIgnoreCase) {
if (isIgnoreCase) {
string = string.toLowerCase();
substr = substr.toLowerCase();
}
var startChar = substr.substring(0, 1);
var strLen = substr.length;
for (var j = 0; j < string.length - strLen + 1; j++) {
if (string.charAt(j) == startChar)//如果匹配起始字符,开始查找
{
if (string.substring(j, j + strLen) == substr)//如果从j开始的字符与str匹配，那ok
{
return true;
}
}
}
return false;
}

</script>
</head>
<body style="padding: 0 0; margin: 0 0;">
<div id="div1" style="background-color: #22dd22; width: 100%">
<span class="clickcss" style="background-color: #00ff00;"></span><span style="width: 100%">
收件人：<input id="input1" /></span>
</div>
<button id="button1" onclick="check();" />
检查</button>
</body>
</html>

赞 (0)

相关推荐

  • js仿QQ邮箱收件人选择与搜索功能

    js仿QQ邮箱收件人选择与搜索功能

    之前因为项目开发需要,对于收件人选择与搜索的js实现,整理如下: 页面截图: 主要html代码: <#--左侧--> <div> <label>To:</label> <div id="divtxt" class="mailtxt_div"></div> <input type="hidden" name="messName" id="me

  • 用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)

    用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)

    不太清楚的可以先看看QQ发信的时候的操作,或者参看本文的演示:http://demo.jb51.net/js/email_qq/index.htm 它的功能大概有以下三个步骤: 一个收人框,右侧是联系薄里的分组 一个弹出联系人的窗体,用的是jquery的dialog组件. 一个输入智能提示插件,这里用到的是jquery的组件Autocomplete我想大家都应该有所了解了吧!首先从最简单的开始,那就是做那个弹出窗dialog了,这次没有像我的上篇文章里说的那样用iframe,http://jqu

  • jQuery实现的Email中的收件人效果（按del键删除）

    除以下代码外,再导入个jquery-1.4.4.min.js文件 ,代码中收件人是写死的("ABC", "ABCDEF", "BCDEF"),已测试通过! 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageencoding="utf-8" %> <!DOCTYPE HTML PUBLIC "

  • Linux中Oracle的sqlplus下退格和Del键无效的问题解决

    Linux中Oracle的sqlplus下退格和Del键无效的问题解决

    PS:近来因工作需要业余在学习oracle,发现通过SecureCRT或putty等SSH客户端远程登录Linux下oracle的sqplus时,输错字符后按Backspace键或Del键删除时,会出现^H或其他乱七八糟的的字符,感觉非常别扭不习惯,虽然可以通过Ctrl+Backspace组合键实现删除功能,但是严重影响使用效率.google了一番,终于完美解决此问题.总结记录如下,本文是此问题最完整的总结: 乱七八糟的字符如图: 一.SecureCRT终端里的解决方法:(不完美) 在Secur

  • 再JavaScript的jQuery库中编写动画效果的指南

    再JavaScript的jQuery库中编写动画效果的指南

    jquery中常用的动画的方法就是hide()与show(). $(element).hide()这段代码可以与这相等element.css("display","none") 在hide(time)与show(time)中填入事件,可以慢慢消失跟显现.可以修改元素的多个样式,高度,宽度,不透明度. 另一组方法fadeIn()与fadeOut()这个与hide跟show不同的是,当使用hide或者show的时候会改变网页的高度,而fadeIn与fadeOut则不会.

  • jQuery中常用动画效果函数(日常整理)

    jquery中动画效果非常多,下面小编给大家分享一下jquery中的动画函数. jQuery的效果函数列表: animate():对被选元素应用"自定义"的动画. clearQueue():对被选元素移除所有排队的函数(仍未运行的). delay():对被选元素的所有排队函数(仍未运行)设置延迟. dequeue():运行被选元素的下一个排队函数. fadeln():逐渐改变被选元素的不透明度,从隐藏到可见. fadeOut():逐渐改变被元素的不透明度,从可见到隐藏. fadeTo(

  • BootStrap中jQuery插件Carousel实现轮播广告效果

    BootStrap中jQuery插件Carousel实现轮播广告效果

    轮播广告在网站中的应用实在是太常见了,下面说一说怎样使用bootstrap中的Carousel插件来实现轮播广告效果,下图为最终效果: 具体实现方法请看下面的代码: <div class="carousel slide" data-ride="carousel" id="carousel" data-interval="3000"> //data-interval设置轮播间隔为3秒钟 <!-- 广告序号指示器

  • jQuery实现的多级下拉菜单效果代码

    jQuery实现的多级下拉菜单效果代码

    本文实例讲述了jQuery实现的多级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款jQuery多级下拉菜单,在支持html5的浏览器中测试你会发现本菜单很智能,会自动判断浏览器边界来改变下拉菜单的显示方向,在ie下没发现此效果.整体上来看,和Windows系统的"经典"主题时的菜单风格特别相似,配合图片,整体效果还是相当有专业水准的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-nlevel-nav-me

  • jQuery实现的fixedMenu下拉菜单效果代码

    jQuery实现的fixedMenu下拉菜单效果代码

    本文实例讲述了jQuery实现的fixedMenu下拉菜单效果代码.分享给大家供大家参考.具体如下: 这里演示了仿Google风格的下拉菜单,其核心实际上是jquery.fixedMenu菜单,使用了jquery.fixedMenu.js和fixedMenu_style.css文件,已在代码中加注释,你可以从本代码中分享现这两个文件,然后重新引用.本菜单在鼠标点击主菜单的时候可向下显示二级子菜单,在火狐或Chrome浏览器下,还可显示菜单阴影效果. 运行效果截图如下: 在线演示地址如下: htt

  • jQuery实现的粘性滚动导航栏效果实例【附源码下载】

    本文实例讲述了jQuery实现的粘性滚动导航栏效果.分享给大家供大家参考,具体如下: 粘性滚动是当导航在滚动过程中会占粘于浏览器上,达到方便网站页面浏览的效果,也是一种用户体验,下面我们看一下是怎么实现的: jQuery的 smint插件,也是一个导航菜单固定插件.当页滚动时,导航菜单会固定在顶部:当点击菜单时,页面会平滑的滚动到对应的区域. 兼容性 由于 smint 使用了 position: fixed,所以它不兼容 IE6.适用浏览器:IE8.360.FireFox.Chrome.Safa

  • jQuery实现获取table中鼠标click点击位置行号与列号的方法

    jQuery实现获取table中鼠标click点击位置行号与列号的方法

    本文实例讲述了jQuery实现获取table中鼠标click点击位置行号与列号的方法.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net 鼠标点击位置行列号</title> </head> <bo

  • jQuery实现简洁的轮播图效果实例

    jQuery实现简洁的轮播图效果实例

    本文实例讲述了jQuery实现简洁的轮播图效果.分享给大家供大家参考,具体如下: HTML: <div class="ppt"> <a href="###"><img src="ppt/ppt1.jpg" /></a> <a href="###" style="display:none;"><img src="ppt/ppt2.jp

随机推荐