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的闭包
Dec 31 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
只需一行代码,轻松实现一个在线编辑器
Nov 12 Javascript
jQuery实现数字加减效果汇总
Dec 16 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
浅谈Node.js:Buffer模块
Dec 05 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 Javascript
JavaScript This指向问题详解
Nov 25 Javascript
vue开发移动端底部导航条功能
Apr 08 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图片上传程序
2008/03/27 PHP
PHP array 的加法操作代码
2010/07/24 PHP
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
初中生个人学习的自我评价
2013/12/04 职场文书
餐厅总经理岗位职责
2013/12/31 职场文书
群众路线剖析材料
2014/09/30 职场文书
个人政治思想总结
2015/03/05 职场文书