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对象和DOM对象相互转化
Apr 24 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
通过JS判断联网类型和连接状态的实现代码
Apr 01 Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 Javascript
如何获取元素的最终background-color
Feb 06 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
Vue中控制v-for循环次数的实现方法
Sep 26 Javascript
vue实现列表拖拽排序的功能
Nov 02 Javascript
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
一些常用的php函数
2006/12/06 PHP
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
超清晰的document对象详解
2007/02/27 Javascript
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
Python多进程编程技术实例分析
2014/09/16 Python
django中模板的html自动转意方法
2018/05/27 Python
儿童学习python的一些小技巧
2018/05/27 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
对pandas中Series的map函数详解
2018/07/25 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
python openpyxl使用方法详解
2019/07/18 Python
python实现门限回归方式
2020/02/29 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
Python远程linux执行命令实现
2020/11/11 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
应届本科生推荐信范文
2013/12/25 职场文书
员工培训心得体会
2013/12/30 职场文书
祖国在我心中演讲稿
2014/01/15 职场文书
市场安全管理制度
2014/01/26 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
行政求职信
2014/07/04 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python
MySQL创建定时任务
2022/01/22 MySQL