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-Jquery简介 入门了解篇
Nov 25 Javascript
jquery调用asp.net 页面后台的实现代码
Apr 27 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
Vue-Router2.X多种路由实现方式总结
Feb 09 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 Javascript
Vue中key的作用示例代码详解
Jun 10 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之数据库操作详解及乱码解决!
2007/01/02 PHP
纯php打造的tab选项卡效果代码(不用js)
2010/12/29 PHP
sae使用smarty模板的方法
2013/12/17 PHP
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
2017/07/18 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
Python简单生成随机数的方法示例
2018/03/31 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
倡议书范文格式
2014/05/12 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
临床医学生职业规划书范文
2014/10/25 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server
Oracle 多表查询基本语法实例
2022/04/18 Oracle
vscode内网访问服务器的方法
2022/06/28 Servers