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

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. 免费api大全（更新中）

    免费api大全(更新中) API大全  http://www.apidq.com/    (这个碉堡了) 天气接口 气象局接口 完整数据:http://m.weather.com.cn/data/10 ...

  2. Oracle数据库--SQL函数

    Oracle SQL函数  1.ASCII返回与指定的字符对应的十进制数;SQL> select ascii('A') A,ascii('a') a,ascii('0') zero,ascii( ...

  3. BIgInteger类和BigDecimal类的理解

    第一部分: 这两个类位于java.math包内,要使用它们必须在类前面引用该包:import java.math.BigInteger;和import java.math.BigDecimal; Bi ...

  4. 四 mybatis开发dao的方法

    mybatis开发dao的方法 1.1     SqlSession使用范围 1.1.1     SqlSessionFactoryBuilder //以流的方式读取总的配置文件 Reader rea ...

  5. （转）JAVA 调用matlab

    本文仅用于学习. 原文地址链接:http://blog.csdn.net/wannshan/article/details/5907877 前段时间摸索了java调用matlab东西,不说学的有多深, ...

  6. php安装，mysql安装

    先安装mysql 下载地址:http://dev.mysql.com/downloads/mysql/5.6.html#downloads 选择“Source Code”,用已经注册好的oracle账 ...

  7. c语言学习感想

    接触c语言已经2个多月了,在这段期间按时的完成了作业,上课能够较好的听讲,因此我获得了老师奖励的小黄衫. 同时,希望自己能够学好c语言! 学习感受与心得 因为兴趣,选择了计算机这专业,我从遥远的南方来 ...

  8. A2DP协议笔记

    1.概述     A2DP(Advanced Audio Distribution Profile)是蓝牙的音频传输协议,典型应用为蓝牙耳机.A2DP协议的音频数据在ACL Link上传输,这与SCO ...

  9. Scrum 的相关概念

    Scrum 的相关概念 4.1   Scrum 的起源 Scrum 是一种灵活的敏捷软件开发管理过程,这个名词来源于英式橄榄球.Scrum方法由Ken Schwaber和Jeff Sutherland ...

  10. linux shell send and receive emails

    http://www.netcan666.com/2016/02/20/%E5%88%A9%E7%94%A8telnet%E5%9C%A8%E5%91%BD%E4%BB%A4%E8%A1%8C%E5% ...