仿新浪微博登陆邮箱提示效果的js代码
2023-06-13 09:15:03 时间
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
<scripttype="text/javascript"src="http://s.juzheke.com/min/f=@public/js/jquery.v1.7.js"></script>
<scripttype="text/javascript">
$(function(){
$.fn.extend({
"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")){
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;
}else{
indexLi--;
}
}else{
if(indexLi==$(value.divTip).children().length-1){
indexLi=1;
}else{
indexLi++;
}
}
$(value.divTip).children().eq(indexLi).addClass("active").siblings().removeClass();
}
//值发生改变时
functionvalChange(){
vartex=$this.val();//输入框的值
varfronts="";//存放含有“@”之前的字符串
varaf=/@/;
varregMail=newRegExp(tex.substring(tex.indexOf("@")));//有“@”之后的字符串,注意正则字面量方法,是不能用变量的。所以这里用的是new方式。
//让提示层显示,并对里面的LI遍历
if($this.val()==""){
blus();
}else{
$(value.divTip).
show().
children().
each(function(index){
varvalAttr=$(this).attr("email");
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){
$(this).bind("propertychange",function(){
valChange();
})
}else{
$(this).bind("input",function(){
valChange();
})
}
//鼠标点击和悬停LI
$(value.divTip).children().
hover(function(){
indexLi=$(this).index();//获取当前鼠标悬停时的LI索引值;
if($(this).index()!=0){
$(this).addClass("active").siblings().removeClass();
}
})
//按键盘的上下移动LI的背景色
$this.keydown(function(event){
if(event.which==38){//向上
keychang("up")
}elseif(event.which==40){//向下
keychang()
}elseif(event.which==13){//回车
varliVal=$(value.divTip).children().eq(indexLi).text();
$this.val(liVal);
blus();
}
})
}
})
$("#loginName").changeTips({
divTip:".on_changes"
});
})
</script>
<styletype="text/css">
*{margin:0;padding:0;}
.login{width:400px;margin:0auto;background:#EBEBEB;position:relative;}
input{width:230px;height:28px;margin:10px0;line-height:28px;}
.login.on_changes{width:232px;position:absolute;top:40px;list-style:none;background:#FFF;border:1pxsolid#000;display:none;padding:10px;}
.login.on_changesli{margin:8px;padding:4px;}
.login.on_changesli.active{background:#CEE7FF;}
</style>
</head>
<body>
<divclass="login">
<divclass="ln"><inputtype="text"maxlength="128"name="loginName"id="loginName"placeholder="邮箱/会员帐号/手机号"/></div>
<ulclass="on_changes">
<liemail="">请选择邮箱类型</li>
<liemail=""></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>
</body>
</html>
相关文章
- php 中js跳转页面跳转页面,js跳转代码_PHP页面跳转 Js页面跳转代码[通俗易懂]
- 如何使用jscythe并通过Node.js的Inspector机制执行任意JS代码
- 让文章自动生成章节目录索引的JS代码详解编程语言
- JS动画效果代码3
- JS解密入门之凭直觉解
- js弹簧效果代码
- JavaScript入门教程(11)js事件处理
- JS强制设为首页的代码
- js跨域问题之跨域iframe自适应大小实现代码
- 纯js实现背景图片切换效果代码
- 客户端限制只能上传jpg格式图片的js代码
- 图片的左右移动,js动画效果实现代码
- 分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
- JS简单实用的倒计时效果实现代码
- JS随即打乱数组实现代码
- jquery.blockUI.js上传滚动等待效果实现思路及代码
- 获取内联和链接中的样式(js代码)
- js实现图片轮换效果代码
- 利用JS延迟加载百度分享代码,提高网页速度
- 仿谷歌主页js动画效果实现代码
- js替换字符串的所有示例代码
- 点击进行复制的JS代码实例
- js实现点小图看大图效果的思路及示例代码
- js抽奖实现随机抽奖代码效果
- js点击页面其他地方关闭弹出层(示例代码)
- 获取select元素被选中的文本内容的js代码
- JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
- js实现的类似于asp数据字典的数据类型代码实例