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 相关文章推荐
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
ionic2中使用自动生成器的方法
Mar 04 Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 Javascript
详解如何在vue-cli中使用vuex
Aug 07 Javascript
Vue中div contenteditable 的光标定位方法
Aug 25 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
世界上最短的数字判断js代码
Sep 09 Javascript
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 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安全配置
2006/12/06 PHP
php实现批量压缩图片文件大小的脚本
2014/07/04 PHP
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
js实现登录验证码
2016/12/22 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
JS实现520 表白简单代码
2018/05/21 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python使用Socket(Https)Post登录百度的实现代码
2012/05/18 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
python 表达式和语句及for、while循环练习实例
2017/07/07 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
对python3新增的byte类型详解
2018/12/04 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
python如何实现图片压缩
2020/09/11 Python
css3中仿放大镜效果的几种方式原理解析
2020/12/03 HTML / CSS
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
英国袜子店:Sock Shop
2017/01/11 全球购物
植物选择:Botanic Choice
2017/02/15 全球购物
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
Servlet如何得到服务器的信息
2015/12/22 面试题
生产副总岗位职责
2013/11/28 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
五四演讲稿范文
2014/09/03 职场文书
买卖合同协议书范本
2014/10/18 职场文书
世界地球日活动总结
2015/02/09 职场文书
总经理年会致辞
2015/07/29 职场文书
新郎新娘致辞
2015/07/31 职场文书
导游词之张家口
2019/12/13 职场文书
纯CSS打字动画的实现示例
2022/08/05 HTML / CSS