有一个苹果6S的兼容性问题

最新推荐文章于 2019-07-22 14:50:47 发布

weixin_33690367

最新推荐文章于 2019-07-22 14:50:47 发布

阅读量559

点赞数

文章标签：前端 javascript python ViewUI

原文链接：https://my.oschina.net/u/3425573/blog/2989869

版权

2019独角兽企业重金招聘Python工程师标准>>>

之前做项目的时候，有一个页面有个短信验证，需要输入验证码，然后验证，但是在苹果6s手机上面，点击输入验证码框的时候，居然触发了页面刷新，测试了其他的型号，安卓的华为，oppo等，ios8等都正常，只有2个同事的苹果6s的有这种情况。

测试了很多中方式：如下：

（1）

<div id="mobile_check_div" style="width:100%; display: none">
    <div class="alert_span"><span >当前客户非您名下客户，查询需先进行短信验证</span></div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd" >
                <p>客户手机号</p>
            </div>
            <div class="weui-cell__ft" style="width: 80%;"><span style="    margin-right: 23%;" id="mobile_num"></span><input type="button" value="发送验证码" id="sendMobileCode" style="height: 25px;border-radius: 5px;" οnclick="sendMobileCode()" /></div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <p>短信验证码</p>
            </div>
            <div class="weui-cell__ft" style="width: 60%;">
                <input type="search"  maxlength="6" οnclick="returnFunction()" style="height: 30px;width: 100%;border: 0px;"  id="mobileCode" placeholder="请输入客户收到的验证码"/>
                &lt;%&ndash;<input type="search" class="weui-search-bar__input" id="mobileCode" οnclick="returnFunction()" placeholder="请输入客户收到的验证码" required="">&ndash;%&gt;
            </div>
        </div>
    </div>
    <div style="padding-bottom:10px;"><input type="button" id="mobile_check_button" value="验证"  style="width: 40%;height: 30px;margin: 25px 0 0 35%;border-radius:5px;" οnclick="checkCode()"></div>
    &lt;%&ndash;<div>
    <input type="hidden" id="mobile_hidden" value="">
    <div class="alert_span"><span >如客户电话信息有变更，请通知客户联系客服在系统中更新后，再进行查询操作，感谢！</span></div>
</div>

（2）

<div id="mobile_check_div" style="width:100%; display: none">
    <div class="alert_span"><span >当前客户非您名下客户，查询需先进行短信验证</span></div>
         <table style="width: 100%;height:100px;">
             <tr><td style="width: 100%;">客户手机号 : </td> </tr>
             <tr><td style="width: 100%;">短信验证码:<input type="search"  maxlength="6" οnkeyup="returnFunction()" style="margin-left: 10%;height: 50%;width: 50%;border: 0px;"  id="mobileCode" placeholder="请输入客户收到的验证码"/></td></tr>
         </table>
         <div style="padding-bottom:10px;"><input type="button" id="mobile_check_button" value="验证"  style="width: 40%;height: 30px;margin: 25px 0 0 35%;border-radius:5px;" οnclick="checkCode()"></div>
     </div>&ndash;%&gt;
    <input type="hidden" id="mobile_hidden" value="">
    <div class="alert_span"><span >如客户电话信息有变更，请通知客户联系客服在系统中更新后，再进行查询操作，感谢！</span></div>
</div>

（3）

<div id="check_div">
    <div style="font-size: 10px;color: #5f646e;"><span>当前客户非您名下客户，查询需先进行短信验证</span></div>
    <div>
        <table style="width: 100%;">
            <tbody>
                <tr><td style="width: 100%;padding-top: 5px;">客户手机号 : <span style="margin-left: 8%;" id="mobile_num"></span><input type="button" value="发送验证码" id="sendMobileCode" style="margin-left: 8%;width: 75px;height: 25px;border-radius: 5px;" οnclick="sendMobileCode()"></td> </tr>
                <tr><td style="width: 100%;padding-top: 5px;">短信验证码:<input type="text" maxlength="6" style="margin-left: 10%;height: 20px;width: 50%;border: 0px;" id="mobileCode" placeholder="请输入客户收到的验证码"></td></tr>
            </tbody>
        </table>
        <div><input type="button" id="mobile_check_button" value="验证" style="width: 33%;height: 30px;margin: 25px 0 20px 35%;" οnclick="checkCode()"></div>
    </div>
    <input type="hidden" id="mobile_hidden" value="">
    <div class="alert_span"><span >如客户电话信息有变更，请通知客户联系客服在系统中更新后，再进行查询操作，感谢！</span></div>
</div>

发现这几种方式都不行，点击输入框的时候都会刷新，或者是点击输入框出现键盘的时候，上面有完成按钮，或者是上下箭头的点击时候导致刷新，

后发现另一个地方有输入框没有导致此种现象，故采用这中方式整改如下代码：

<div id="check_div" style="display: none;">
    <div style="font-size: 10px;color: #5f646e;"><span >当前客户非您名下客户，查询需先进行短信验证</span></div>
    <div>
        <table style="width: 100%;">
            <tr><td style="width: 100%;">客户手机号 : <span style="margin-left: 8%;" id="mobile_num"></span><input type="button" value="发送验证码" id="sendMobileCode" style="margin-left: 8%;width: 75px;height: 25px;border-radius: 5px;" οnclick="sendMobileCode()" /></td> </tr>
            <tr><td style="width: 100%;">短信验证码:<input type="text"  maxlength="6" style="margin-left: 10%;height: 100%;width: 50%;border: 0px;"  id="mobileCode" placeholder="请输入客户收到的验证码"/></td></tr>
        </table>
        <div><input type="button" id="mobile_check_button" value="验证"  style="width: 33%;height: 30px;margin: 25px 0 0 35%;" οnclick="checkCode()"></div>
    </div>
    <input type="hidden" id="mobile_hidden" value="">
</div>
<div style="font-size: 10px;color: #5f646e;"><span >如客户电话信息有变更，请通知客户联系客服在系统中更新后，再进行查询操作，感谢！</span></div>

此种兼容性的问题就没有出现了，点击输入框，还是点击出现的键盘上的完成按钮，上下箭头按钮，都不会导致刷新了。

至此问题虽然解决了，但是我还是不知道什么导致的苹果6s出现这种兼容性的问题，我这种方式为什么可以解决这个兼容性的现象，希望有大神可以帮我解惑！！！