Jquery输入框邮箱自动提示
Js代码：
// JavaScript Document
/*
(function($){
$.fn.pluginName = function(){
// 插件代码写在这里
}
})(jQuery);
上面定义了一个jQuery函数，形参是$,函数定义完成后，把jQuery这个实参传递进去，立即调用执行，这样的好处是我们在写jQuery插件时，也可以使用$这个别名，而不会与prototype引起冲突。*/
(function($){
$.fn.extend({//对jquery方法的扩展
"changeTips":function(value){
value= $.extend({divTip:""},value)
var$this = $(this);
varindexLi = 0;
//点击document隐藏下拉层
$(document).click(function(event){
if($(event.target).attr("class")== value.divTip || $(event.target).is("li")){//value.divTip即on_changes 他的类是on_changes或者当前对象是li
varliVal = $(event.target).text();
$this.val(liVal);
blus();
}else{
blus();
}
})
//隐藏下拉层
functionblus(){
$(value.divTip).hide();
}
//键盘上下执行的函数
functionkeychang(up){
if(up== "up"){
if(indexLi== 1){
indexLi= $(value.divTip).children().length-1;//当index是1，选择了向上时，不进去o,而是选择了列表的最后一个
}else{
indexLi--;
}
}else{//选择了向下
if(indexLi== $(value.divTip).children().length-1){//当是最后一个的时候，仍然选择下一个时，回到index=1处
indexLi= 1;
}else{
indexLi++;
}
}
$(value.divTip).children().eq(indexLi).addClass("active").siblings().removeClass();//indexli加上高亮，其他去掉
}
//值发生改变时
functionvalChange(){
vartex = $this.val();//输入框的值
varfronts = "";//存放含有“@”之前的字符串
varaf = /@/;
varregMail = new RegExp(tex.substring(tex.indexOf("@")));//有“@”之后的字符串,注意正则字面量方法，是不能用变量的。所以这里用的是new方式。
//让提示层显示，并对里面的LI遍历
if($this.val()==""){
blus();
}else{
$(value.divTip).
show().
children().
each(function(index){
varvalAttr = $(this).attr("email");//@163.com @qq.com等内 if(index==1){$(this).text(tex).addClass("active").siblings().removeClass();}
//索引值大于1的LI元素进处处理
if(index>1){
//当输入的值有“@”的时候
if(af.test(tex)){
//如果含有“@”就截取输入框这个符号之前的字符串
fronts= tex.substring(tex.indexOf("@"),0);
$(this).text(fronts+valAttr);
//判断输入的值“@”之后的值，是否含有和LI的email性
if(regMail.test($(this).attr("email"))){
$(this).show();
}else{
if(index>1){
$(this).hide();
}
}
}
//当输入的值没有“@”的时候
else{
$(this).text(tex+valAttr);
}
}
})
}
}
//输入框值发生改变的时候执行函数，这里的事件用判断处理浏览器兼容性;
if($.browser.msie){//判断是否是ie浏览器
$(this).bind("propertychange",function(){
valChange();
})
}else{//非ie
$(this).bind("input",function(){
valChange();
})
}
//鼠标点击和悬停LI
$(value.divTip).children().
hover(function(){
indexLi= $(this).index();//获取当前鼠标悬停时的LI索引值;
if(indexLi!=0){//索引值不是0
$(this).addClass("active").siblings().removeClass();//当前的节点加上class属性，他的兄弟节点失去class属性
}
})
//按键盘的上下移动LI的背景色
$this.keydown(function(event){
if(event.which== 38){//向上
keychang("up")
}elseif(event.which == 40){//向下
keychang()
}else if(event.which == 13){ //回车
varliVal = $(value.divTip).children().eq(indexLi).text();//列表中第当前索引的
$this.val(liVal);
blus();//隐藏下拉层
}
})
}
})
})(jQuery)
Html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript"src="jquery-1.4.4.min.js"></script>
<script type="text/javascript"src="inputmail.js"></script>
<style type="text/css">
*{ margin:0; padding:0;}
body { font:12px/1.8 Arial; color:#666;}
ul,li{ list-style:none;}
h1.tit-h1 { font-size:38px;text-align:center; margin:30px 0 15px; color:#f60;}
.go-back{ text-align:center; border-top:1pxdashed #ccc; padding:10px; margin-top:20px; font-size:40px;}
.wrap{border:1px dashed #ccc;background:#f8f8f8; padding:20px;}
.login{width:400px; margin:0 auto;background:#EBEBEB; position:relative;}
input{ width:230px; height:28px;margin:10px 0; line-height:28px;}
.login .on_changes{width:232px;position:absolute; top:40px; list-style:none; background:#FFF; border:1px solid#000; display:none; padding:10px;}
.login .on_changes li{margin:8px;padding:4px;}
.login .on_changes li.active{background:#CEE7FF;}
</style>
</head>
<body>
<h1 class="tit-h1">jquery输入框邮箱下拉提示层</h1>
<div class="wrap">
<scripttype="text/javascript">
$(function(){
$("#loginName").changeTips({
divTip:".on_changes"
});
})
</script>
<divclass="login">
<divclass="ln"> <input type="text" maxlength="128"name="loginName" id="loginName" placeholder="邮箱/会员帐号/手机号" /></div>
<ulclass="on_changes" style="position: absolute; left: 78px; top:42px">
<liemail="">请选择邮箱类型</li>
<li email=""></li>
<liemail="@sina.com"></li>
<liemail="@163.com"></li>
<liemail="@qq.com"></li>
<liemail="@hotmail.com"></li>
<liemail="@126.com"></li>
<liemail="@gmail.com"></li>
<liemail="@yahoo.com"></li>
</ul>
</div>
</div>
</body>
</html>
847
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
