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 相关文章推荐
JavaScript 函数调用规则
Sep 14 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
jquery dataview数据视图插件使用方法
Dec 23 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
js实现带箭头的进度流程
Mar 26 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
js之ajax文件上传
May 13 Javascript
JS前端可视化canvas动画原理及其推导实现
Aug 05 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” 彩蛋进行敏感信息获取
2013/08/07 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
详解AngularJS验证、过滤器、指令
2017/01/04 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
vue.js中父组件调用子组件的内部方法示例
2017/10/22 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
python安装gdal的两种方法
2019/10/29 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
医院学雷锋活动策划方案
2014/02/15 职场文书
公司晚会策划方案
2014/05/17 职场文书
投标承诺书怎么写
2014/05/24 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
2015最新婚礼主持词
2015/06/30 职场文书
员工试用期工作总结
2019/06/20 职场文书
深入理解Vue的数据响应式
2021/05/15 Vue.js
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis