javascript - 求问天天竞拍下的手机输入框问题-PHP 중국어 네트워크 Q&A

http://www.ttpai.cn/

这个输入手机部分用的是keyup事件。想模仿他这种效果，自己做的每次输完一个数字提示框就没了，在点击又出现，怎么做到输入框一直都在呢

以下是我的源码

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>朋友E车</title>

<style>

margin: 0;
padding: 0;

}
ul,li{

list-style: none;

}
.getusertel {
width: 100%;
height: 563px;
margin: 0 auto;
position: relative;
background-image: url(http://cdn18.ttpaicdn.com/news/pages/pc-v2016/src/images/home-bigbanner.jpg);
background-repeat: no-repeat;
background-position: center center;
}
.getusertel-success {
position: absolute;
top: 220px;
width: 1200px;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff;
font-size: 22px;
}
.getusertel-success > em {
color: #fff;
font-size: 22px;
margin: 0 5px;
}
.getusertel-form {
background: #fff;
border-radius: 60px;
color: #666;
font-size: 18px;
margin: 0 auto;
padding: 0 38px;
position: absolute;
top: 320px;
z-index: 10;
left: 50%;
margin-left: -406px;
width: 812px;
height: 58px;
}
.getusertel-form .tt {
float: left;
font-size: 18px;
line-height: 58px;
}
.getusertel-form .citytt {
width: 180px;
background-image: url(../imgs/home-icon-arrow-up.png);
background-repeat: no-repeat;
background-position: 40px center;
}
.getusertel-form-city {
float: left;
display: inline-block;
font-size: 18px;
margin-left: 18px;
width: 180px;
height: 58px;
line-height: 58px;
border-right: 1px solid #b7c8d8;
}
.getusertel-form-city > .cityarea {
left: 15px;
position: absolute;
top: 80px;
z-index: 100;
background: #fff;
border-radius: 5px;
width: 473px
/ display: none; /
}
.getusertel-form-city > .cityarea.active {
display: block;
}
.getusertel-form-city > .cityarea > .icon {
background-image: url("http://cdn20.ttpaicdn.com/news/pages/pc-v2016/dist/images/city-area-icon-top.png");
background-repeat: no-repeat;
background-position: left top;
display: block;
margin-left: 160px;
width: 20px;
height: 9px;
top: -9px;
position: absolute;
}
.getusertel-form-city > .cityarea > ul {
clear: both;
overflow: hidden;
padding: 34px 63px;
}
.getusertel-form-city > .cityarea > ul > li {
float: left;
color: #999;
font-size: 18px;
cursor: pointer;
display: inline-block;
margin-right: 66px;
}
.getusertel-form-city > .cityarea > ul > li:nth-child(4n) {
margin-right: 0;
}
.getusertel-form-tel {
float: left;
width: 434px;
height: 58px;
margin-left: 18px;
}
.getusertel-form-tel .phone {
background: none;
border: medium none;
display: inline-block;
font-size: 18px;
color: #666;
margin-left: 15px;
outline: medium none;
width: 364px;
height: 58px;
line-height: 58px;
}
.getusertel-form-btn {
position: absolute;
right: 0;
float: left;
background: #fe9e4a none repeat scroll 0 0;
border: medium none;
border-radius: 0 60px 60px 0;
color: #fff;
cursor: pointer;
font-size: 20px;
height: 58px;
outline: medium none;
position: absolute;
right: 0;
top: 0;
width: 163px;
z-index: 100;
}

.warn {
left: 221px;
padding-top: 9px;
display: none;
position: absolute;
top: 64px;
z-index: 100;
width: 473px;
}
.warn-arrow {
background: transparent url("http://cdn20.ttpaicdn.com/news/pages/pc-v2016/dist/images/city-area-icon-top.png") no-repeat scroll left top;
display: block;
height: 9px;
margin-left: 160px;
width: 20px;
}
.warn-box {
background: #fff none repeat scroll 0 0;
border-radius: 5px;
color: #fda63f;
font-size: 16px;
padding: 18px 30px;
overflow: hidden;
}
.warn-box-icon {
background: #fda63f none repeat scroll 0 0;
border-radius: 25px;
float: left;
font-size: 12px;
color: #fff;
font-style: normal;
height: 16px;
line-height: 16px;
margin-right: 8px;
margin-top: 3px;
text-align: center;
width: 16px;
}
.warn-box-text {
float: left;
color: #fda63f;
font-size: 16px;
width: calc(100% - 24px);
}

:-moz-placeholder, *::-moz-placeholder {
color: #ccc !important;
}

</style>

</head>
<body>

<p class="main_container">
    <p class="getusertel-success">已有<em>3093670</em>位车主成功报名卖车</p>
    <p class="getusertel-form">
        <p class="tt">城市</p>
        <p class="getusertel-form-city">
            <p class="tt citytt">福州</p>
            <p class="cityarea">
                <i class="icon"></i>
                <ul class="js-city-name">
                    <li>上海</li>
                    <li>成都</li>
                    <li>深圳</li>
                    <li>北京</li>
                    <li>南京</li>
                    <li>广州</li>
                    <li>武汉</li>
                    <li>天津</li>
                    <li>苏州</li>
                    <li>杭州</li>
                    <li>东莞</li>
                    <li>重庆</li>
                    <li>佛山</li>
                </ul>
            </p>
        </p>
        <p class="getusertel-form-tel">
            <p class="tt">手机</p>
            <input type="text" name="mobile" maxlength=11 placeholder="请输入卖车的车主手机号" autocomplete = "off" class="phone js-phone-warn">    
        </p>

         <button class="getusertel-form-btn">免费高价卖车</button>
        
         <p class="warn js-warn">
             <i class="warn-arrow"></i>
             <p class="warn-box f-clearfix">
                 <i class="warn-box-icon">!</i>
                 <p class="warn-box-text js-text"></p>
             </p>
         </p>

    </p>
</p>

</p>

    var flag = 1;
    var reg = /^1[3578][01379]\d{8}$/;


    function warnbox(content){

        var warnbox = $(".js-warn");
        var ct = $(".js-text");
        var ctVal = ct.text();

        if(flag === 1){

            warnbox.show();    
            ct.html(content);            
            flag = 0;

        }else{
            warnbox.hide();
            ct.html(content);                            
            flag = 1;
        }
    }

    $(".js-phone-warn").keyup(function(event) {

        var phone = $(".js-phone-warn").val();

        if(!phone.match(reg)){
            warnbox("你的手机号不准确");
        }
    });

    

    $(".js-city-name").find("li:eq(3)").click(function(){
        
        warnbox("由于政策限制,北京地区只接受京牌车辆,暂时无法为非京牌车辆提供服务。");

    
    });

</script>
</body>
</html>

function warnbox(content, flag){ var warnbox = $(".js-warn"); var ct = $(".js-text"); var ctVal = ct.text(); if(flag === false){ warnbox.hide(); ct.html(''); return; } ct.html(content); warnbox.show(); } $(".js-phone-warn").keyup(function(event) { if(!reg.test($(this).val())){ warnbox("你的手机号不准确"); } else { warnbox(null, false); } });