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之卸载鼠标事件的代码
May 14 Javascript
基于jquery的超简单上下翻
Apr 20 Javascript
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
javascript 3d 逐侦产品展示(核心精简)
Mar 26 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
May 28 Javascript
使用OPENLAYERS3实现点选的方法
Sep 24 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 Javascript
Vue父组件监听子组件生命周期
Sep 03 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
php5.2.0内存管理改进
2007/01/22 PHP
php 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
JavaScript 加号(+)运算符号
2009/12/06 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
js变量提升深入理解
2016/09/16 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
vuex actions传递多参数的处理方法
2018/09/18 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python中datetime常用时间处理方法
2015/06/15 Python
深入理解Python中的内置常量
2017/05/20 Python
python机器学习之随机森林(七)
2018/03/26 Python
python实现树形打印目录结构
2018/03/29 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
Python collections模块使用方法详解
2019/08/28 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
打架检讨书300字
2014/02/02 职场文书
中国梦主题教育活动总结
2014/05/05 职场文书
答谢会策划方案
2014/05/12 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
react antd实现动态增减表单
2021/06/03 Javascript