jquery实现注册页面输入邮箱快捷选择的功能

很多网站都有的功能,效果见截图:

没什么废话说贴代码(直接拷贝代码存储成html文件打开即可):

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>   
        <script type="text/javascript">
            $(function(){            
                $("#email").focus(function(){ $(".inputEmail ul").slideDown("fast"); }).keyup(function(){
                    var tem=$(this).val();
                    var temArr=tem.split("@");
                    var len=temArr.length;
                    $(".inputEmail li").each(function(){
                        var title=$(this).attr("title");
                        if(title){
                            if(len==1){
                                var text="<font color='red'>"+tem+'</font>'+title;
                            }else{
                                var text=tem+title;
                                var temStr=temArr[1];
                                if(title.indexOf("@"+temArr[1])==0){
                                    var text="<font color='red'>"+temArr[0]+title.replace(temStr,temStr+'</font>');
                                    $(this).show("slow");
                                }else{
                                    $(this).hide("slow");
                                }
                            }
                            $(this).html(text);
                        }
                    });
                });
                $(".inputEmail li").click(function(){
                    if($(this).attr("title")&&$(this).attr("title")!=$(this).html()){
                        $("#email").val($(this).text());
                        $(".inputEmail ul").slideUp("fast");
                    }
                });
                $(".inputEmail").focusout(function() {
                    setTimeout(function(){ $(".inputEmail ul").slideUp("fast"); },50);
                });

                $("#submit").click(function(){
                    if($("#email").val()==''){
                        alert("您还没有填写的电子邮箱地址!");
                        return fasle;
                    }
                    var r=/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
                    if (!r.test($("#email").val())) {
                        alert("您填写的电子邮箱地址格式错误!");
                        return fasle;
                    }
                    alert("提交中...");
                });        
            });
        </script>
        <style>
            *{ margin: 0; padding: 0px;}
            .inputEmail {
                position:relative;
            }
            .inputEmail ul {
                position:absolute;
                left:9px;
                top:42px;
                z-index:5;
                opacity:0.9;
                filter: alpha(opacity=100);
                background:#fff;
                border:1px solid #ccc;
                width:300px;
                display:none;
            }
            .inputEmail ul li{ont-size:12px; line-height: 18px; padding:0 10px; border-bottom: 1px dotted #CCCCCC; list-style: none;}
            .inputEmail ul li:hover{ background:#fff9c9;}
            .inputEmail input {
                height:30px;
                margin:12px 0 0 9px;
                width:300px;
                font-size:16px;
                text-indent:10px;
                font-weight:bold;
            }
        </style>
    </head>
    <body>
        <div class="inputEmail ">
            <input name="email" id="email" type="text" maxlength="128" placeholder="请输入您的邮箱" value="" />
            <ul>
                <li title="@sina.com">@sina.com</li>
                <li title="@163.com">@163.com</li>
                <li title="@qq.com">@qq.com</li>
                <li title="@126.com">@126.com</li>
                <li title="@vip.sina.com">@vip.sina.com</li>
                <li title="@sina.cn">@sina.cn</li>
                <li title="@hotmail.com">@hotmail.com</li>
                <li title="@gmail.com">@gmail.com</li>
                <li title="@sohu.com">@sohu.com</li>
                <li title="@yahoo.cn">@yahoo.cn</li>
                <li title="@yahoo.cn">@yahoo.com.cn</li>
                <li title="@139.com">@139.com</li>
                <li title="@wo.com.cn">@wo.com.cn</li>
                <li title="@189.cn">@189.cn</li>
                <li>请选择邮箱类型(其他邮箱直接输入)</li>
            </ul><a href="javascript:void(0)" id="submit">订阅</a>
        </div>
    </body>
</html>

发表评论