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 简单导航实现代码
Sep 11 Javascript
JS高级拖动技术 setCapture,releaseCapture
Jul 31 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
angularjs http与后台交互的实现示例
Dec 21 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
详解微信小程序中var、let、const用法与区别
Jan 11 Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 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
生成sessionid和随机密码的例子
2006/10/09 PHP
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
[原创]php获取数组中键值最大数组项的索引值
2015/03/17 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
制作特殊字的脚本
2006/06/26 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
13个PHP函数超实用
2015/10/21 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
vue实现div拖拽互换位置
2020/07/29 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
Python学习小技巧之列表项的拼接
2017/05/20 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
领导参观欢迎词
2015/01/26 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
行政处罚事先告知书
2015/07/01 职场文书
门卫管理制度范本
2015/08/05 职场文书
学校教学管理制度
2015/08/06 职场文书
pandas中pd.groupby()的用法详解
2022/06/16 Python