这篇文章主要为大家详细介绍了一个仿邮箱登录提示框 js 开发案例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
最近在好好的研究 JS,通过一个仿邮箱登录提示框的案例加深下对面向对象的理解!啥都别说,先上图:
功能:实现正则匹配显示相符的内容、键盘事件、鼠标事件
简单布局:
- <div id="login">
- <h2>
- 仿微博登录
- </h2>
- <div class="detail">
- <input type="text" placeholder='邮箱/会员账号/手机号' autocomplete='off' class='name'
- id='nameInput' maxlength='18'>
- </div>
- <div class="detail">
- <input type="password" placeholder='请输入密码' autocomplete='off' class='password'>
- </div>
- <ul id='suggest'>
- <li class="note">
- 请选择邮箱类型:
- </li>
- <li class="item" email="">
- </li>
- <li class="item" email="@sina.com">
- @sina.com
- </li>
- <li class="item" email="@163.com">
- @163.com
- </li>
- <li class="item" email="@qq.com">
- @qq.com
- </li>
- <li class="item" email="@126.com">
- @126.com
- </li>
- <li class="item" email="@sina.cn">
- @sina.cn
- </li>
- <li class="item" email="@139.com">
- @139.com
- </li>
- </ul>
- </div>
CSS 代码:
- body,
- ul,
- li,
- h2 {
- margin: 0;
- padding: 0;
- color: #ccc;
- }
- ul {
- list - style - type: none;
- }#login {
- width: 250px;
- background: #fff;
- border: 1px solid#ccc;
- text - align: center;
- margin: 10px auto;
- position: relative;
- }#login h2 {
- background: #FA7D3C;
- color: #fff;
- line - height: 40px;
- }.detail {}.detail input {
- width: 220px;
- height: 30px;
- margin: 10px auto;
- border: 1px solid#ccc;
- padding - left: 5px;
- }#suggest {
- width: 225px;
- height: auto;
- background: #fff;
- border: 1px solid#ccc;
- position: absolute;
- top: 84px;
- left: 12px;
- display: none;
- }#suggest li {
- width: 225px;
- height: 25px;
- line - height: 25px;
- text - align: left;
- cursor: pointer;
- }#suggest li.note {
- color: #989090;
- }#suggest li.active {
- background: #eee;
- }
JS 代码:
- window.onload=function(){
- var s1=new Suggest();
- s1.init();
- };
- function Suggest(){
- this.oInput=document.getElementById('nameInput');
- this.oUl=document.getElementById('suggest');
- this.aLi=this.oUl.getElementsByTagName('li');
- }
- Suggest.prototype={
- init:function(){
- this.toChange();
- this.toBlur();
- },
- toChange:function(){
- //ie:onpropertychange
- //标准:oninput
- /*判断IE浏览器最短方法:var isIE = !-[1,]*/
- var ie=!-[1,];
- //存this指向,this指向问题
- var This=this;
- if(ie){
- this.oInput.onpropertychange=function(){
- if(This.oInput.value==''){
- This.tips();//?解决ie下空值时li新增内容不置空情况
- return;
- }
- This.showUl();
- This.tips();
- This.sel(1);//选中第一条
- };
- }else{
- this.oInput.oninput=function(){
- This.showUl();
- This.tips();
- This.sel(1);//选中第一条
- }
- }
- },
- showUl:function(){
- this.oUl.style.display='block';
- },
- toBlur:function(){
- var This=this;
- this.oInput.onblur=function(){
- This.oUl.style.display='none';
- }
- },
- tips:function(){
- var value=this.oInput.value;
- //正则匹配
- var re=new RegExp('@'+value.substring(value.indexOf('@')+1)+'');
- // console.log(re);
- //bug修复:全部内容一次性清空仍可出现提示
- for(var i=1;i<this.aLi.length;i++){
- this.aLi[i].style.display='block';
- }
- if(re.test(value)){//匹配@输入后情况
- for(var i=1;i<this.aLi.length;i++){
- var oEmail=this.aLi[i].getAttribute('email');
- if(i==1){
- this.aLi[i].innerhtml=value;
- }else{
- if(re.test(oEmail)){//匹配项显示,否则隐藏
- this.aLi[i].style.display='block';
- }else{
- this.aLi[i].style.display='none';
- }
- }
- }
- }else{//未输入@之前
- for(var i=1;i<this.aLi.length;i++){
- var oEmail=this.aLi[i].getAttribute('email');
- if(!oEmail){
- this.aLi[i].innerHTML=value;
- }else{
- this.aLi[i].innerHTML=value+oEmail;
- }
- }
- }
- },
- sel:function(iNow){//传入当前索引
- var This=this;
- //每次改变重新设置类型,不会重复
- for(var i=1;i<this.aLi.length;i++){
- this.aLi[i].className='item';
- }
- if(this.oInput.value==''){
- this.aLi[iNow].className='item';
- }else{
- this.aLi[iNow].className='active';
- }
- for(var i=1;i<this.aLi.length;i++){
- this.aLi[i].index=i;
- this.aLi[i].onmouseover=function(){
- for(var i=1;i<This.aLi.length;i++){
- This.aLi[i].className='item';
- }
- this.className='active';
- iNow=this.index;//当前索引
- };
- //鼠标点击事件:
- this.aLi[i].onmousedown=function(){
- This.oInput.value=this.innerHTML;
- }
- }
- //键盘事件:
- this.oInput.onkeydown=function(e){
- var e=e||window.event;
- if(e.keyCode==38){//上
- if(iNow==1){
- iNow=This.aLi.length-1;
- }else{
- iNow--;
- }
- for(var i=1;i<This.aLi.length;i++){
- This.aLi[i].className='item';
- }
- This.aLi[iNow].className='active';
- }else if(e.keyCode==40){//下
- if(iNow==This.aLi.length-1){
- iNow=1;
- }else{
- iNow++;
- }
- for(var i=1;i<This.aLi.length;i++){
- This.aLi[i].className='item';
- }
- This.aLi[iNow].className='active';
- }else if(e.keyCode==13){//回车
- This.oInput.value=This.aLi[iNow].innerHTML;
- This.oInput.blur();//回车后触发blur事件隐藏ul层
- }
- }
- }
- }
需要处理好多个分支情况,处理好小细节,也感觉面向对象中比较常遇到是 this 指向的问题,通过这个案例好好地理解了下 this。
来源: http://www.phperz.com/article/17/0405/264015.html