该登录框和百度的搜索框类似，可以实现如下效果:

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实例学习之三——类新浪微博的登录框的更多相关文章

  1. 第一百三十三节，JavaScript，封装库--弹出登录框

    JavaScript,封装库--弹出登录框 封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事 ...

  2. css 伪类选择器制作登录框表单

    使用伪类选择器 制作鼠标悬停时文本框出现橙色虚线边框 制作鼠标激活时出现背景颜色淡橙色 使用css制作文本框圆角矩形效果,制作文本框背景图片,及背景不重复效果 <!DOCTYPE html> ...

  3. 拖动登录框 HTML+CSS+js

    先上效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. js 拟写登录页 可以拖动登录框

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. 基于jquery的提示框JavaScript 插件，类Bootstrap

    目录 基于jquery的提示框JavaScript 插件,类Bootstrap 基于jquery的提示框JavaScript 插件,类Bootstrap 源码 github地址: https://gi ...

  6. 【JavaScript 12—应用总结】：弹出登录框

    导读:上篇博客中,做好了个人中心的下拉菜单,这次,将做每个网站都会有的一个登录功能,以此类推,可以做出别的想要的弹出框,如错误提示啦,或者注册. 一.实现分析 首先:和下拉菜单一样,需要通过CSS样式 ...

  7. JQuery+CSS3实现封装弹出登录框效果

    原文:JQuery+CSS3实现封装弹出登录框效果 上次发了一篇使用Javascript来实现弹出层的效果,这次刚好用了JQuery来实现,所以顺便记录一下: 因为这次使用了Bootstrap来做一个 ...

  8. 基于CSS3动态背景登录框代码

    基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  9. java web 登录框

    我们会骂 12306 的网站界面挫,效果差,速度慢,回头看看自己写的代码,是不是也一样的狗血!在前端,很多看似简单的东西,内藏无数玄机.本文将以一个小小的登录框为入口,谈一谈如何完善自己的程序. 在很 ...

随机推荐

  1. Scrum会议7(Beta版本)

    组名:天天向上 组长:王森 组员:张政.张金生.林莉.胡丽娜 代码地址:HTTPS:https://git.coding.net/jx8zjs/llk.git SSH:git@git.coding.n ...

  2. Responsive布局技巧

    在Responsive布局中,可以毫无保留的丢弃: 第一, 尽量少用无关紧要的div: 第二,不要使用内联元素(inline): 第三,尽量少用JS或flash: 第四,丢弃没用的绝对定位和浮动样式: ...

  3. windows下的mongodb分片配置

    1. 分片服务器设置mongod -port 10001 -dbpath=F:/DbSoft/mongodb/rs_data/master -directoryperdb --shardsvr -re ...

  4. [ZZ] 景深效果(Depth of Field) , Pass1 将场景渲染到一个RenderTarget,做为清晰版, Pass2: BluredRT , Pass3: WDepth = Depth / Far_Z_Clip

    http://blog.csdn.net/xoyojank/article/details/1883520   什么是景深效果? 景深效果,简称DOF,在人眼跟光学摄像设备上很常见.如下图: 简单地来 ...

  5. 一些浏览器的USER-AGENT

    115浏览器的USER-AGENT 版本号:5.1.3.55 Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like G ...

  6. Java中同步

    解决资源共享的同步操作,有两种方法:一是同步代码块,二是同步方法. 在需要同步的代码块加上synchronized关键字, 同步代码块时必须指定一个需要同步的对象,但一般都是将当前对象(this)设置 ...

  7. circle and bar

    <!doctype html> <meta charset="utf-8"> <html> <head> <title> ...

  8. nrf51822裸机教程-硬件timer

    该讲介绍51822的Timer/Counter模块工作在timer模式下(定时器模式,还可以工作为计数器模式) 如何操作 51822的Timer/Counter结构如下图所示 Timer模块从PCLK ...

  9. java JDK8 学习笔记——第13章 时间与日期

    第十三章 时间与日期 13.1 认识时间与日期 13.1.1 时间的度量 1.格林威治标准时间GMT 格林威治标准时间的正午是太阳抵达天空最高点之时.现在已经不作为标准时间使用. 2.世界时UT世界时 ...

  10. windbg 命令 gchandles

    使用windbg导出dump文件 .dump /ma D:\testdump.dmp gchandles命令列出句柄,同时列出句柄引用的对象,演示代码如下: using System; using S ...