javascript实例学习之三——类新浪微博的登录框
该登录框和百度的搜索框类似，可以实现如下效果:
1.文字输入时自动弹出提示层
2，提示层根据输入文字进行自动过滤
3，提示层可以使用上下按键进行选择
4,提示层可以点击或者回车来确认输入
微博登录框html代码
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>微博登录框效果</title>
<style>
*,*:before,*:after{box-sizing:border-box;}
div{width:300px;margin:50px auto;position:relative;}
div input{width:%;height:25px;line-height: 25px;margin:5px ;}
ul{width:300px;list-style: none; margin:; padding: ;position:absolute; top:40px; left:; border:1px solid #ccc; background:#fff;display: none;}
ul li{width:%;padding: 3px 5px ;cursor:pointer;}
ul li.active{background: rgb(,,);color:rgb(,,);}
</style>
</head>
<body>
<div id="login">
<input type="text" placeholder="邮箱/会员账号/手机号" id="username">
<input type="text" placeholder="请输入密码">
<ul id="suggest">
<li class="note">请选择邮箱类型</li>
<li email="" class="active"></li>
<li email="@sina.com" class="item">@sina.com</li>
<li email="@163.com" class="item">@.com</li>
<li email="@qq.com" class="item">@qq.com</li>
<li email="@126.com" class="item">@.com</li>
<li email="@vip.sina.com" class="item">@vip.sina.com</li>
<li email="@sina.cn" class="item">@sina.cn</li>
<li email="@hotmail.com" class="item">@hotmail.com</li>
<li email="@gmail.com" class="item">@gmail.com</li>
<li email="@sohu.com" class="item">@sohu.com</li>
<li email="@yahoo.com" class="item">@yahoo.com</li>
<li email="@139.com" class="item">@.com</li>
<li email="@wo.com.cn" class="item">@wo.com.cn</li>
<li email="@189.cn" class="item">@.com</li>
</ul>
</div>
<script src="js/weiboLogin.js"></script>
</body>
</html>
微博登录框html代码
微博登录框javascript代码
document.addEventListener('DOMContentLoaded', function() {
var s1 = new Suggest();
s1.init();
}, false);
function Suggest() {
//提示框对应的输入框
this.oMenu = document.getElementById('username');
//提示框对应的提示层
this.oContent=document.getElementById('');
this.oUl = document.getElementById('suggest');
this.aLis = this.oUl.getElementsByTagName('li');
}
Suggest.prototype = {
constructor: Suggest,
init: function() {
var that = this;
var iNow = ;
this.oInput.addEventListener('input', function() {
//效果1：文本框输入的时候，提示框显示
that.showUl();
//效果3：提示框自动补充邮箱后缀，并在用户输入@之后，自动进行过滤
that.changeUl();
that.sel(iNow);
}, false);
//效果2：失去焦点的时候，提示框隐藏
this.oInput.addEventListener('blur', function() {
that.hideUl();
}, false);
//
//效果4，点击对应的提示项，文本框的内容随之改变，同时提示框消失
for (var i = ; i < this.aLis.length; i++) {
this.aLis[i].index = i;
this.aLis[i].addEventListener('mouseover', function() {
that.sel(this.index);
iNow = this.index;
}, false);
this.aLis[i].addEventListener('mousedown',function(){
that.oInput.value=this.innerHTML;
},false);
}
//效果5：上下键盘可以切换提示选中项
//效果6：当按下回车键时，文本框内容随之改变，同时提示框消失
//焦点在哪个控件上，就给哪个控件添加处理时间
this.oInput.addEventListener('keydown', function(e) {
var event = e || window.event;
var code = event.charCode || event.keyCode;
if (code == ) { //向上
iNow--;
if (iNow == ) {
iNow = that.aLis.length - ;
}
} else if (code == ) {
iNow++;
if (iNow == that.aLis.length ) {
iNow = ;
}
}
that.sel(iNow);
//如果按下的是回车键
if(code==){
that.oInput.value=that.aLis[iNow].innerHTML;
that.oInput.blur();
}
}, false);
},
showUl: function() {
this.oUl.style.display = 'block';
for (var i = ; i < this.aLis.length; i++) {
this.aLis[i].style.display = 'block';
this.aLis[i].className = '';
}
},
hideUl: function() {
this.oUl.style.display = 'none';
},
changeUl: function() {
var value = this.oInput.value;
var suffix = value.substring(value.indexOf('@') + );
var reg = new RegExp('@' + suffix);
var match = reg.test(value);
for (var i = , len = this.aLis.length; i < len; i++) {
var emailText = this.aLis[i].getAttribute('email');
//分为两种情况，输入内容包含@，以及输入内容不包含@
if (match) {
//说明输入内容包含@
//根据输入的后缀进行过滤，只显示匹配的邮箱
if (reg.test(emailText)) {
this.aLis[i].innerHTML = value.substring(, value.indexOf('@')) + emailText;
} else {
this.aLis[i].style.display = 'none';
}
} else {
//说明输入内容不包含@
this.aLis[i].innerHTML = value + emailText;
}
}
},
sel: function(iNow) {
for (var i = ; i < this.aLis.length; i++) {
this.aLis[i].className = '';
}
if (this.oInput.value) {
this.aLis[iNow].className = 'active';
}
},
};
微博登录框javascript代码
javascript实例学习之三——类新浪微博的登录框的更多相关文章
- 第一百三十三节，JavaScript，封装库--弹出登录框
JavaScript,封装库--弹出登录框 封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事 ...
- css 伪类选择器制作登录框表单
使用伪类选择器 制作鼠标悬停时文本框出现橙色虚线边框 制作鼠标激活时出现背景颜色淡橙色 使用css制作文本框圆角矩形效果,制作文本框背景图片,及背景不重复效果 <!DOCTYPE html> ...
- 拖动登录框 HTML+CSS+js
先上效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- js 拟写登录页 可以拖动登录框
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 基于jquery的提示框JavaScript 插件，类Bootstrap
目录 基于jquery的提示框JavaScript 插件,类Bootstrap 基于jquery的提示框JavaScript 插件,类Bootstrap 源码 github地址: https://gi ...
- 【JavaScript 12—应用总结】：弹出登录框
导读:上篇博客中,做好了个人中心的下拉菜单,这次,将做每个网站都会有的一个登录功能,以此类推,可以做出别的想要的弹出框,如错误提示啦,或者注册. 一.实现分析 首先:和下拉菜单一样,需要通过CSS样式 ...
- JQuery+CSS3实现封装弹出登录框效果
原文:JQuery+CSS3实现封装弹出登录框效果 上次发了一篇使用Javascript来实现弹出层的效果,这次刚好用了JQuery来实现,所以顺便记录一下: 因为这次使用了Bootstrap来做一个 ...
- 基于CSS3动态背景登录框代码
基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- java web 登录框
我们会骂 12306 的网站界面挫,效果差,速度慢,回头看看自己写的代码,是不是也一样的狗血!在前端,很多看似简单的东西,内藏无数玄机.本文将以一个小小的登录框为入口,谈一谈如何完善自己的程序. 在很 ...
随机推荐
- iOS 用宏定义写一个单例（Singleton）
用如下方法定义单例 @interface singleton_interface(ClassName); @end 实现单例在 @implemention singleton_implemention ...
- 【转】bShare分享插件的使用
原文地址:http://blog.csdn.net/pan_junbiao/article/details/17884203 1.引用JS文件 分享标签: 1.class="bshare-c ...
- PHP 设计模式 笔记与总结（8）策略模式
① 策略模式,将一组特定的行为和算法封装成类,以适应某些特定的上下文环境,这种模式就是策略模式. ② 实际应用举例,假如一个电商网站系统,针对男性女性用户要各自跳转到不同的商品类目,并且所有广告位展示 ...
- 常用Ubuntu 命令
sudo apt-get updatesudo apt-get upgrade以下2選1sudo apt-get install ubuntu-desktop如果你只想安装必要的桌面管理软件而不想安装 ...
- iMx280A测试声纹
1.首先要有声纹识别的动态库,且arm-linux-gcc的版本相同.可以在虚拟机用file 命令来看文件的基本信息,通过file指令,我们得以辨 识该文件的类型. 2.用tftp将库传到开发板的li ...
- Jsp入门学习笔记
#Jsp入门 一.JSP基础语法 1.JSP指令: page inlcude taglib 2.JSP注释: a.html注释: <!-- abcdefghijklmn --> b.jsp ...
- svn local obstruction, incoming add upon merge
http://little418.com/2009/05/svn-local-obstruction-incoming-add-upon-merge.html If you've found this ...
- The world beyond batch: Streaming 101
https://www.oreilly.com/ideas/the-world-beyond-batch-streaming-101 https://www.oreilly.com/ideas/the ...
- Grid组件 列头居中
在grdMain组件中的 class中设置“ x-grid-title-center ”
- 【转】Unity3D中脚本的执行顺序和编译顺序（vs工程引用关系）
http://www.cnblogs.com/champ/p/execorder.html 在Unity中可以同时创建很多脚本,并且可以分别绑定到不同的游戏对象上,它们各自都在自己的生命周期中运行.与 ...