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


Posted in Javascript onMarch 20, 2011

除以下代码外,再导入个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>
Javascript 相关文章推荐
基于jQuery的仿flash的广告轮播
Nov 05 Javascript
js Map List 遍历使用示例
Jul 10 Javascript
javascript闭包的理解
Apr 01 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
jQuery文字横向滚动效果的实现代码
May 31 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
Vue.js简易安装和快速入门(第二课)
Oct 17 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
微信小程序使用npm支持踩坑
Nov 07 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 Javascript
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
jquery图片上下tab切换效果
Mar 18 #Javascript
javascript一些实用技巧小结
Mar 18 #Javascript
jquery获取下拉列表的值为null的解决方法
Mar 18 #Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
Mar 17 #Javascript
javascript定时保存表单数据的代码
Mar 17 #Javascript
eval与window.eval的差别分析
Mar 17 #Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
Mar 17 #Javascript
You might like
人族 TERRAN 概述
2020/03/14 星际争霸
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
php数组键名技巧小结
2015/02/17 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
js停止输出代码
2008/07/20 Javascript
javascript 动态生成私有变量访问器
2009/12/06 Javascript
JavaScript关于select的相关操作说明
2010/01/13 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
Python中with及contextlib的用法详解
2017/06/08 Python
python中map()函数的使用方法示例
2017/09/29 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
python实现桌面托盘气泡提示
2019/07/29 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
Python 创建守护进程的示例
2020/09/29 Python
详解Python中的文件操作
2021/01/14 Python
生物化工工艺专业应届生求职信
2013/10/08 职场文书
团队拓展活动总结
2014/08/27 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL