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中的var_dump函数实现代码
Sep 07 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
jquery处理json对象
Nov 03 Javascript
js+css绘制颜色动态变化的圈中圈效果
Jan 27 Javascript
Js的Array数组对象详解
Feb 22 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 Javascript
vue实现简单跑马灯效果
May 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 木马攻击防御技巧
2009/06/13 PHP
php 多线程上下文中安全写文件实现代码
2009/12/28 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
Use Word to Search for Files
2007/06/15 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
使用JavaScript进行表单校验功能
2017/08/01 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
微信跳一跳游戏python脚本
2020/04/01 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
mac下给python3安装requests库和scrapy库的实例
2018/06/13 Python
Python读取xlsx文件的实现方法
2019/07/04 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
建筑施工实习自我鉴定
2013/09/19 职场文书
营销主管自我评价怎么写
2013/09/19 职场文书
教师工作表现自我评价
2015/03/05 职场文书
python爬虫selenium模块详解
2021/03/30 Python
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers