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表格内容过滤的实现方法
Jul 05 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
Javascript实现计算个人所得税
May 10 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
Bootstrap Table使用整理(二)
Jun 09 Javascript
利用Javascript开发一个二维周视图日历
Dec 14 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
Feb 08 Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 Javascript
图文讲解vue的v-if使用方法
Feb 11 Javascript
layui表格 列自动适应大小失效的解决方法
Sep 06 Javascript
通过Kettle自定义jar包供javascript使用
Jan 29 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/21 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
怎么用javascript进行拖拽
2006/07/20 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
2016/05/17 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
如何检查一个对象是否为空
2019/04/11 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python中os操作文件及文件路径实例汇总
2015/01/15 Python
Flask之请求钩子的实现
2018/12/23 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
2020/04/08 HTML / CSS
印度尼西亚最大的电商平台:Tokopedia(印尼版淘宝)
2017/12/02 全球购物
联强国际笔试题面试题
2013/07/10 面试题
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
高二化学教学反思
2014/01/30 职场文书
委托书模板
2014/04/04 职场文书
企业战略合作意向书
2015/05/08 职场文书
学生退学证明
2015/06/23 职场文书
会议新闻稿
2015/07/17 职场文书
服装店员工管理制度
2015/08/07 职场文书
关于Python中*args和**kwargs的深入理解
2021/08/07 Python