http://www.ttpai.cn/
这个输入手机部分用的是keyup事件。想模仿他这种效果,自己做的每次输完一个数字提示框就没了,在点击又出现,怎么做到输入框一直都在呢
以下是我的源码
朋友E车
*{
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;
}
已有3093670位车主成功报名卖车
城市
福州
- 上海
- 成都
- 深圳
- 北京
- 南京
- 广州
- 武汉
- 天津
- 苏州
- 杭州
- 东莞
- 重庆
- 佛山
手机
!
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("由于政策限制,北京地区只接受京牌车辆,暂时无法为非京牌车辆提供服务。"); });
warnbox
函数里flag = 1;
判断问题 每次执行warnbox
函数你都切换了flag
的值依据你提供的网站的交互逻辑,每次
keyup
手机号不符合显示错误,最后输入完符合才隐藏错误