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 相关文章推荐
JS实现self的resend
Jul 22 Javascript
游览器中javascript的执行过程(图文)
May 20 Javascript
jQuery时间轴插件使用详解
Jul 16 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
Jul 10 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
angular 基于ng-messages的表单验证实例
May 04 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
js匿名函数使用&amp;传参(实例)
Sep 08 Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 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 5.0 Pear安装方法
2006/12/06 PHP
PHP 函数执行效率的小比较
2010/10/17 PHP
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
yii2安装详细流程
2018/05/23 PHP
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
深入document.write()与HTML4.01的非成对标签的详解
2013/05/08 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
js判断某个方法是否存在实例代码
2015/01/10 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
如何编写jquery插件
2017/03/29 jQuery
angular select 默认值设置方法
2017/06/23 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
jQuery 开发之EasyUI 添加数据的实例
2017/09/26 jQuery
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
js尾调用优化的实现
2019/05/23 Javascript
Python基础中所出现的异常报错总结
2016/11/19 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
Windows下Python3.6安装第三方模块的方法
2018/11/22 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
Python实现点云投影到平面显示
2020/01/18 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
python Selenium 库的使用技巧
2020/10/16 Python
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
在求职信中如何凸显个人优势
2013/10/30 职场文书
四年的大学生生活自我评价
2013/12/09 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
婚前保证书
2014/04/29 职场文书
普通党员个人整改措施
2014/10/27 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript
讲解MySQL增删改操作
2022/05/06 MySQL