Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 自动增加@
Blogger Information
Blog 9
fans 0
comment 0
visits 6751
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
自动增加@
大白菜的博客
Original
459 people have browsed it

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>邮箱自动加上@后面内容</title>
<script id="jqbb" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
body { background-color: #fff }
#maillist,#register .toemail iframe {
    -moz-border-colors:none;
    background:none repeat scroll 0 0 #fff;
    border-color:-moz-use-text-color #ccc #ccc;
    border-right:1px solid #ccc;
    border-style:none solid solid;
    border-width:0 1px 1px;
    display:none;
    left:0;
    position:absolute;
    top:31px;
    width:12.5%;
    z-index:999;
    left:141px;
    font-size:12px;
    overflow-x:hidden;
}
#maillist ul {
    margin-top:5px;
    margin-left:-35px;
}
#maillist ul li {
    color:#666;
    cursor:pointer;
    list-style:none;
}
#maillist ul li:hover {
    color:#999;
}
input {
    width:12.5%;
}
</style>
</head>

<body>
<label>请输入邮箱地址：</label>
<input id="regemail" class="int-type w-thir" type="text" autocomplete="off" tips="邮箱地址" name="email" rule="" style="ime-mode: disabled;"><div id="maillist" style="display: none;">
    <ul>
<li>
        <li>@qq.com</li>
        <li>@163.com</li>
    </ul>
</div>

<script>
function $(id) {
    return document.getElementById(id);
}
var lists;
var len;
window.onload = function() {
    var objtxt = $("regemail");
    var objlist = $("maillist");

    lists = document.getElementsByTagName("li");
    len = lists.length;

    //给每一个li绑定一个鼠标点击事件
    for (var i = 1; i < len; i++) {
        lists[i].onmousedown = function() {
            objtxt.value = this.textContent;
            objlist.style.display = "none";
        }
    }

    //计算这个下拉框的显示位置
    //焦点选中时
    objtxt.onfocus = function() {
        objlist.style.display = "block";
    }
    //焦点移开时
    objtxt.onblur = function() {
        // objlist.style.display="none";
    }

    //输入过程中时
    objtxt.onkeyup = function() {
        //获取文本中的值
        var txt = this.value;
        var flag = "";
        if (txt.indexOf("@") > 0) {
            flag = txt.substring(txt.indexOf("@") - 1); //获取输入的@开始的内容
            txt = txt.substring(0, txt.indexOf("@"));
        } else {
            flag = "";
        }
        var val = "";
        //将这个值放到所有的li前面
        for (var i = 1; i < len; i++) {
            val = lists[i].textContent;
            val = val.substring(val.indexOf("@"));
            lists[i].textContent = txt + val;
        }

        //如果用户输入了@，则检查哪些是否满足条件的
        if (flag != "") {
            var reg = new RegExp(flag, "i");
            for (var i = 1; i < len; i++) {
                if (reg.test(lists[i].textContent)) {
                    lists[i].style.display = "block";
                } else {
                    lists[i].style.display = "none";
                }
            }
        }
    }
}
</script>
</body>
</html>

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post