自动增加@

<!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>

相关文章