仿网易邮箱登录

先上个效果图吧

方法使用很简单

 示例： ShowEmail("Text1", "div", "select", "@163.com,@qq.com,@126.com,@188.com,@Live.com,@live.cn");

定义：function ShowEmail(elementId, showDivClssName, selectClssName, emails)

参数 ：

　　elementId：输入框ID

　　showDivClssName:提示框class名称
　　selectClssName：选择行的class名称
　　emails：邮箱后缀名（多个用,号分开）

　　下面就是js

 

 

function ShowEmail(elementId, showDivClssName, selectClssName, emails) {
            var showDivId = document.createElement("div");
            showDivId.className = showDivClssName;
            showDivId.style.position = "absolute";
            if (emails.indexOf(",") != -1 || emails.length>0) {
                var tempemails = emails.split(",");
                for (var index = 0; index < tempemails.length; index++) {
                    var newNode = document.createElement("div");
                    newNode.setAttribute("name", tempemails[index]);
                    newNode.style.marginLeft = "3px";
                    newNode.style.marginRight = "3px";
                    newNode.style.marginTop = "2px";
                    newNode.style.marginBottom = "2px";
                    showDivId.appendChild(newNode);
                }
            }
            document.body.appendChild(showDivId);
            $(elementId).onfocus = function () {
                var isnone = true;
                var temp = this;
                var tempLeft = temp.offsetLeft;
                while (temp.offsetParent != null) {
                    oParent = temp.offsetParent;
                    tempLeft += oParent.offsetLeft;
                    temp = oParent;
                }
                temp = this;
                var temptop = temp.offsetTop;
                while (temp.offsetParent != null) {
                    oParent = temp.offsetParent;
                    temptop += oParent.offsetTop;
                    temp = oParent;
                }
                temp = this;
                var tooltip = $(showDivId);
                if (this.value.indexOf("@") == -1 && this.value.length > 0) {
                    tooltip.style.display = "block";
                    tooltip.style.top = temptop + this.offsetHeight + "px";
                    tooltip.style.left = tempLeft + "px";
                }
                var divs = tooltip.getElementsByTagName("div");
                for (var j = 0; j < divs.length; j++) {
                    divs[j].onmouseover = function () {
                        for (var k = 0; k < divs.length; k++) {
                            if (divs[k].className == selectClssName) {
                                divs[k].className = "";
                            }
                        }
                        this.className = selectClssName;
                        isnone = false;
                    }
                    divs[j].onmouseout = function () {
                        this.className = "";
                        isnone = true;
                    }
                    divs[j].onclick = function () {
                        var sss = event;
                        temp.value = temp.value + this.getAttribute("name");
                        tooltip.style.display = "none";
                        this.className = "";
                        return;
                    }
                }
                this.select();
                this.onblur = function () {
                    textId = temp;
                    tooltipId = tooltip;
                    if (textId.value.indexOf("@") == -1 && textId.value.length > 0) {
                        divs = tooltipId.getElementsByTagName("div");
                        for (var j = 0; j < divs.length; j++) {
                            if (divs[j].className == selectClssName) {
                                textId.value = textId.value + divs[j].getAttribute("name");
                                tooltipId.style.display = "none";
                                return;
                            }
                        }
                        textId.value = textId.value + divs[0].getAttribute("name");
                        tooltipId.style.display = "none";
                    }
                }
                this.onkeyup = function (e) {
                    if (divs == null) {
                        divs = tooltip.getElementsByTagName("div");
                    }
                    if (!e){ e = event; }
                    if (e.keyCode == 40 || e.keyCode == 38 || e.keyCode == 13) {
                        var ii = 0;
                        for (; ii < divs.length; ii++) {
                            if (divs[ii].className == selectClssName) {
                                var tempIndex = ii;
                                if (e.keyCode == 38) {
                                    if (ii == 0) { tempIndex = divs.length - 1; }else{ tempIndex = tempIndex - 1; }
                                }else if (e.keyCode == 40) {
                                    if (ii == divs.length - 1) { tempIndex = 0; }else{ tempIndex = tempIndex + 1; }
                                }else {
                                    temp.value = temp.value + divs[ii].getAttribute("name");
                                    tooltip.style.display = "none";
                                    divs[ii].className = "";
                                    return;
                                }
                                divs[tempIndex].className = selectClssName;
                                divs[ii].className = "";
                                return;
                            }
                        }
                        if (ii == divs.length) {
                            divs[0].className = selectClssName;
                        }
                        return;
                    }
                    if (temp.value.indexOf("@") == -1 && temp.value.length > 0) {
                        tooltip.style.top = temptop + temp.offsetHeight + "px";
                        tooltip.style.left = tempLeft + "px";
                        for (var i = 0; i < divs.length; i++) {
                            tooltip.style.display = "block";
                            divs[i].innerText = temp.value + divs[i].getAttribute("name");
                        }
                    } else {
                        tooltip.style.display = "none";
                    }
                }
            }
        }

 

dome

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .select
        {
            background-color:#ccc;
        }
        .div
        {
             border:1px solid #8496ce; font-size:14px; background-color:#fff;display:none;
        }
    </style>
</head>
<body>
    <form action="WebForm1.aspx">
    <input type="text" id="test" tooltip="Show" selectClass="select" /><br />
    <br />
    <input type="text" id="Text1" style="width:300px;" maxlength="40" />
    <script type="text/javascript">
        function $(elementId) { if (typeof (elementId) == "string") { return document.getElementById(elementId); } return elementId; }
        ShowEmail("Text1", "div", "select", "@163.com,@qq.com,@126.com,@188.com,@Live.com,@live.cn");
        ShowEmail("test", "div", "select", "@163.com,@qq.com,@126.com,@188.com,@Live.com,@live.cn");
        function ShowEmail(elementId, showDivClssName, selectClssName, emails) {
            var showDivId = document.createElement("div");
            showDivId.className = showDivClssName;
            showDivId.style.position = "absolute";
            if (emails.indexOf(",") != -1 || emails.length>0) {
                var tempemails = emails.split(",");
                for (var index = 0; index < tempemails.length; index++) {
                    var newNode = document.createElement("div");
                    newNode.setAttribute("name", tempemails[index]);
                    newNode.style.marginLeft = "3px";
                    newNode.style.marginRight = "3px";
                    newNode.style.marginTop = "2px";
                    newNode.style.marginBottom = "2px";
                    showDivId.appendChild(newNode);
                }
            }
            document.body.appendChild(showDivId);
            $(elementId).onfocus = function () {
                var isnone = true;
                var temp = this;
                var tempLeft = temp.offsetLeft;
                while (temp.offsetParent != null) {
                    oParent = temp.offsetParent;
                    tempLeft += oParent.offsetLeft;
                    temp = oParent;
                }
                temp = this;
                var temptop = temp.offsetTop;
                while (temp.offsetParent != null) {
                    oParent = temp.offsetParent;
                    temptop += oParent.offsetTop;
                    temp = oParent;
                }
                temp = this;
                var tooltip = $(showDivId);
                if (this.value.indexOf("@") == -1 && this.value.length > 0) {
                    tooltip.style.display = "block";
                    tooltip.style.top = temptop + this.offsetHeight + "px";
                    tooltip.style.left = tempLeft + "px";
                }
                var divs = tooltip.getElementsByTagName("div");
                for (var j = 0; j < divs.length; j++) {
                    divs[j].onmouseover = function () {
                        for (var k = 0; k < divs.length; k++) {
                            if (divs[k].className == selectClssName) {
                                divs[k].className = "";
                            }
                        }
                        this.className = selectClssName;
                        isnone = false;
                    }
                    divs[j].onmouseout = function () {
                        this.className = "";
                        isnone = true;
                    }
                    divs[j].onclick = function () {
                        var sss = event;
                        temp.value = temp.value + this.getAttribute("name");
                        tooltip.style.display = "none";
                        this.className = "";
                        return;
                    }
                }
                this.select();
                this.onblur = function () {
                    textId = temp;
                    tooltipId = tooltip;
                    if (textId.value.indexOf("@") == -1 && textId.value.length > 0) {
                        divs = tooltipId.getElementsByTagName("div");
                        for (var j = 0; j < divs.length; j++) {
                            if (divs[j].className == selectClssName) {
                                textId.value = textId.value + divs[j].getAttribute("name");
                                tooltipId.style.display = "none";
                                return;
                            }
                        }
                        textId.value = textId.value + divs[0].getAttribute("name");
                        tooltipId.style.display = "none";
                    }
                }
                this.onkeyup = function (e) {
                    if (divs == null) {
                        divs = tooltip.getElementsByTagName("div");
                    }
                    if (!e){ e = event; }
                    if (e.keyCode == 40 || e.keyCode == 38 || e.keyCode == 13) {
                        var ii = 0;
                        for (; ii < divs.length; ii++) {
                            if (divs[ii].className == selectClssName) {
                                var tempIndex = ii;
                                if (e.keyCode == 38) {
                                    if (ii == 0) { tempIndex = divs.length - 1; }else{ tempIndex = tempIndex - 1; }
                                }else if (e.keyCode == 40) {
                                    if (ii == divs.length - 1) { tempIndex = 0; }else{ tempIndex = tempIndex + 1; }
                                }else {
                                    temp.value = temp.value + divs[ii].getAttribute("name");
                                    tooltip.style.display = "none";
                                    divs[ii].className = "";
                                    return;
                                }
                                divs[tempIndex].className = selectClssName;
                                divs[ii].className = "";
                                return;
                            }
                        }
                        if (ii == divs.length) {
                            divs[0].className = selectClssName;
                        }
                        return;
                    }
                    if (temp.value.indexOf("@") == -1 && temp.value.length > 0) {
                        tooltip.style.top = temptop + temp.offsetHeight + "px";
                        tooltip.style.left = tempLeft + "px";
                        for (var i = 0; i < divs.length; i++) {
                            tooltip.style.display = "block";
                            divs[i].innerText = temp.value + divs[i].getAttribute("name");
                        }
                    } else {
                        tooltip.style.display = "none";
                    }
                }
            }
        }
    </script>
</body>
</html>