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

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. HDU 4031 Attack（线段树/树状数组区间更新单点查询+暴力）

    Attack Time Limit: 5000/3000 MS (Java/Others)    Memory Limit: 65768/65768 K (Java/Others) Total Sub ...

  2. python 操作excel 使用笔记

    写入excel, 保存的过程中需要注意,保存格式xls后缀,如果用xlsx会报错 def set_style(name,height,bold=False): """&q ...

  3. 必应(Bing)每日图片获取API

    必应(Bing)每日图片获取API January 11, 2015 API http://lab.dobyi.com/api/bing.php 介绍 Value Description title ...

  4. 实用Javascript代码片段

    清除select下拉选项,添加并选择特点选项 $('#mySelect') .find('option') .remove() .end() .append('<option value=&qu ...

  5. MVC 扩展方法特点

    .NET MVC 3中扩展方法特点: (1)扩展类的名称以Extensions结尾: (2)扩展类的类型是static: (3)扩展方法至少有一个参数,第一个参数必须指定该方法作用于哪个类型,并且该参 ...

  6. 解决mysql数据库连接问题

    设置mysql远程连接root权限 在远程连接mysql的时候应该都碰到过,root用户无法远程连接mysql,只可以本地连,对外拒绝连接.需要建立一个允许远程登录的数据库帐户,这样才可以进行在远程操 ...

  7. Memcached原理深度分析详解

    Memcached是 danga.com(运营LiveJournal的技术团队)开发的一套分布式内存对象缓存系统,用于在动态系统中减少数据库负载,提升性能.关于这个东 西,相信很多人都用过,本文意在通 ...

  8. Bluetooth GAP介绍

    目录 1 GAP协议栈 2 Profile Role 3 用户接口 4 模式 5 安全 5.1 认证(Authentication) 5.2 安全模式 6 Idle Mode Procedures 7 ...

  9. JS 去字符串空格 总结

    str为要去除空格的字符串: 去除所有空格: str = str.replace(/\s+/g,""); 去除两头空格: str = str.replace(/^\s+|\s+$/ ...

  10. sp.net2.0中的新增控件BulletedList的一些高级用法

    asp.net2.0新增了一个BulletedList控件,通过它可以以列表形式显示数据,而不必再用Repeater,Datalist等实现相同的效果.今天做程序的时候正好用到了这个控件,就把它的一些 ...