weixin_44216898
weixin_44216898
2019-03-19 16:05

在苹果5移动设备上使用jquery事件时无效

  • css
  • html5
  • javascript
  • css3
  • jquery

由于项目需求,使用苹果5手机访问的时候,发现了一个坑爹的问题,
如论如何点击“下一步”,都没有任何反应,
可是在安卓和苹果6,7,8各种模拟器中一切正常.
望各位大佬指点。





##@zhumengniao

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <style>
                  *{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a:link{
    text-decoration:none;
}
html,body{
    width: 100%;
    /* height: 100%; */
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;
    list-style: none;
    list-style-type: none;
    background-color: white;
    /* overflow: hidden; */
    /* position: absolute; */
}
.wrapper{
    width: 100%;
    /* height: 100%; */
}
.wrapper-nav{
    width: 100%;
    /* height: 8%; */
    line-height: 3rem;
    background-color: rgb(255, 255, 255);
    text-align: center;
}
.wrapper-nav img{
    width: 30%;
    margin-top: 5%;
}
.register{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.register-type{
    border-bottom: 1px solid #ccc;
    margin-left: auto;
    margin-right: auto;
}
.register-type a{
    width: 49%;
    line-height: 4rem;
    text-align: center;
    font-size: 16px;
    display: inline-block;
    color: #4d4d4d; 
}
.register-phoneNumber{
    margin-top: 3%;
}
.register-phoneNumber-box{
    width: 100%;
    /* height: 4rem; */
    /* line-height: 4rem; */
    border-radius: 5px;
    margin-top: 3%;
    border: 1px solid #ccc;
}
.register-phoneNumber-box input{
    width: 65%;
    font-size: 16px;
    height: 2.7rem;
    padding: 2%;
    border: 0;
    outline: 0;
    border-radius: 5px;  
    background-color: transparent;

}
.register-phoneNumber-box a{
    font-size: 16px;
    color: #00b4ef; 
}
.register-button{
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 20%;
    border-radius: 25px;
    background-color: #ccc;    
}
.register-button a{
    font-size: 26px;
    color: white;
    line-height: 4rem;
}
.otherContacts{
    width: 100%;
    margin-top: 8%;
    text-align: center;
}
.otherContacts span{
    margin: 2%;
    display: block;
}
.otherContacts a{
    width: 10%;
    display: inline-block;
    margin: 5%;
}
.otherContacts img{
    width: 100%;
}
.otherContacts p{
    font-size: 12px;
    text-align: center;
    margin-top: 6%;

}


        </style>
    <title>登录</title>
</head>
<body>
    <div class="wrapper">
            <!-- 导航栏 -->
        <div class="wrapper-nav">
            <img src="img/logo.png" alt="">
        </div>
        <hr>
           <!-- 登录 -->
        <div class="register">
            <div class="register-type">
                <a id="withoutCodeLogin" class="tab_selected" href="javascript:changeToLogin(1);">免密登录</a>
                <a id="withoutCodeRegister" href="javascript:changeToLogin(2);">账号注册</a>
            </div>
            <div class="register-phoneNumber" id="box-left">
                <div class="register-phoneNumber-box">
                        <input type="text" placeholder="请输入手机号" >
                </div>
                <div class="register-phoneNumber-box">
                        <input type="text" placeholder="6位数字验证码">
                        <a href="">获取验证码</a>
                </div>
            </div>
            <div class="register-phoneNumber" id="box-right" style="display: none;">
                 <div class="register-phoneNumber-box">
                         <input type="text" placeholder="手机号/邮箱" >
                 </div>
                 <div class="register-phoneNumber-box">
                         <input type="text" placeholder="6位数字验证码">
                         <a href="">获取验证码</a>
                 </div>
             </div>
        </div>

           <!-- 登录button -->
        <div class="register-button"><a href="">登录</a></div>

         <!-- 其它方式 -->
         <div class="otherContacts">
            <span>其它方式登录</span>
            <hr>
            <a href=""><img src="img/douyin.png" alt=""></a>
            <a href=""><img src="img/weixin.png" alt=""></a>
        </div>
    </div>


    <script src="https://www.telabytes.com/static/assets/js/jquery-3.1.1.min.js"></script>
    <script>
        function changeToLogin(num) {
            if (num == 1) {
                $("#withoutCodeLogin").addClass("tab_selected")
                $("#withoutCodeRegister").removeClass("tab_selected")
                $("#box-left").css("display", "")
                $("#box-right").css("display", "none")
            } else {
                $("#withoutCodeRegister").addClass("tab_selected")
                $("#withoutCodeLogin").removeClass("tab_selected")

                $("#box-left").css("display", "none")
                $("#box-right").css("display", "")
            }
        }


    </script>



</body>
</html>
  • 点赞
  • 回答
  • 收藏
  • 复制链接分享

1条回答

为你推荐

换一换