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 19 Javascript
javascript css styleFloat和cssFloat
Mar 15 Javascript
jquery实现图片裁剪思路及实现
Aug 16 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
Feb 11 Javascript
js简单抽奖代码
Jan 16 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
Jquery简单实现GridView行高亮的方法
Jun 15 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 Javascript
详解JavaScript中的自定义事件编写
May 10 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 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 内存缓存加速功能memcached安装与用法
2009/09/03 PHP
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
mongodb和php的用法详解
2019/03/25 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
js更优雅的兼容
2010/08/12 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
python冒泡排序算法的实现代码
2013/11/21 Python
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
python WindowsError的错误代码详解
2017/07/23 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
详解如何减少python内存的消耗
2019/08/09 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
Java如何基于wsimport调用wcf接口
2020/06/17 Python
Python如何操作docker redis过程解析
2020/08/10 Python
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
应用化学专业职业生涯规划书
2014/01/22 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
企业授权委托书范本
2014/09/22 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python