javascript - 求问天天竞拍下的手机输入框问题
问题描述
这个输入手机部分用的是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>
<div class="getusertel">
<div class="main_container">
<div class="getusertel-success">已有<em>3093670</em>位车主成功报名卖车</div>
<div class="getusertel-form">
<div class="tt">城市</div>
<div class="getusertel-form-city">
<p class="tt citytt">福州</p>
<div 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>
</div>
</div>
<div class="getusertel-form-tel">
<p class="tt">手机</p>
<input type="text" name="mobile" maxlength=11 placeholder="请输入卖车的车主手机号" autocomplete = "off" class="phone js-phone-warn">
</div>
<button class="getusertel-form-btn">免费高价卖车</button>
<div class="warn js-warn">
<i class="warn-arrow"></i>
<div class="warn-box f-clearfix">
<i class="warn-box-icon">!</i>
<p class="warn-box-text js-text"></p>
</div>
</div>
</div>
</div></div>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script>
<script>
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>
warnbox函数里flag = 1;判断问题 每次执行warnbox函数你都切换了flag的值
依据你提供的网站的交互逻辑，每次keyup 手机号不符合显示错误，最后输入完符合才隐藏错误
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);
}
});这篇关于javascript - 求问天天竞拍下的手机输入框问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
;){kind=link}