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 自动转到命名锚记
Jan 10 Javascript
JavaScript 替换Html标签实现代码
Oct 14 Javascript
js报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
js推箱子小游戏步骤代码解析
Jan 10 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 Javascript
es6函数之严格模式用法实例分析
Mar 17 Javascript
vue 子组件和父组件传值的示例
Sep 11 Javascript
如何用vue实现网页截图你知道吗
Nov 17 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
PHP也可以?成Shell Script
2006/10/09 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
学生信息管理系统Python面向对象版
2019/01/30 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
python opencv实现图像配准与比较
2021/02/09 Python
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
北京某公司的.net笔试题
2014/03/20 面试题
Linux操作面试题
2012/05/16 面试题
医药代表个人的求职信分享
2013/12/08 职场文书
省三好学生申请材料
2014/01/22 职场文书
表彰先进的通报
2014/01/31 职场文书
幼儿园开学寄语
2014/04/03 职场文书
理财计划书
2014/08/14 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
公司管理制度范本
2015/08/03 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL