公告列表
公告列表
收藏
回答

微信 6.7.4 浏览器弹出输入文字的框后 button点击触发焦点上移

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="">
    <meta name="format-detection" content="telephone=no">
    <title></title>
  </head>
  <body>
    <div id="app">
        <div class="main">
            <div class="part">
            <div data-v-5a4bed13="" id="p1" class="part page2" style="min-height: 667px;"><div data-v-5a4bed13="" class="login"><div data-v-5a4bed13="" class="phone"><span data-v-5a4bed13="">+86</span> <input data-v-5a4bed13="" type="tel" maxlength="11" placeholder="请输入手机号"> <button data-v-5a4bed13="">
          获取验证码
        </button></div> <div data-v-5a4bed13="" class="code"><span data-v-5a4bed13="">验证码</span> <input data-v-5a4bed13="" type="text" placeholder="请输入验证码"></div></div> <p data-v-5a4bed13="" class="loginTips"><span data-v-5a4bed13="">我已阅读并同意</span>条款及隐私政策</p> <button data-v-5a4bed13="" class="btn loginBtn"  onclick="go(this)">
      快速登录
    </button> <div data-v-5a4bed13="" id="mask" class="mask" style="display: none;"></div> <div data-v-5a4bed13="" class="captcha-box" style="display: none;"><p data-v-5a4bed13="">图形验证</p> <div data-v-5a4bed13="" id="slider-capture"></div> <div data-v-5a4bed13="" class="none slice-img"></div></div></div>
 
 
            </div>
        </div>
    </div>
<style>
body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4, h5, h6, i, b, textarea, button, input, select, figure, figcaption {
  padding: 0;
  margin: 0;
  list-style: none;
  font-style: normal;
  text-decoration: none;
  border: none;
  box-sizing: border-box;
  font-weight: lighter;
  font-family: "PingFang-SC", Helvetica;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
 
}
 
html, body {
  background-color: #e9e9e7;
  width: 100%;
  height: 100%;
  /*-webkit-user-select: none;
  user-select: none;*/
}
img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
 
// 消除输入框和按钮的原生外观
/*input, textarea {
  -webkit-appearance: none;
}*/
 
.clear:after {
  content: '';
  display: block;
  clear: both;
}
 
.clear {
  zoom: 1;
}
 
.back_img {
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
 
.left {
  float: left;
}
 
.right {
  float: right;
}
 
.text-center {
  text-align: center;
}
 
.hide {
  display: none;
}
 
.show {
  display: block;
}
 
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
 
.fl {
  float: left;
}
 
.fr {
  float: right;
}
 
@wa: 100vw;
@ha: 100vh;
@wu: @wa / 375;
@hu: @ha / 667;
 
html, body, #app {
    width: 100vw;
    height: 100vh;
    color: rgb(51,51,51);
    position: fixed;
    top: 0;
    left: 0;
}
 
.main{
    width: 100vw;
    height: 100vh;
}
.main .part{
    width: 100vw;
    height: 100vh;
 
    position: relative;
}
.main .part .login{
    width: 90.66666667vw;
    height: 56.53333333vw;
    border-radius: 2.66666667vw;
    background-color: rgba(246, 247, 251, 0.9);
    position: absolute;
    top: 50vw;
    left: 4.66666667vw;
}
.main .part .loginTips{
    width: 100vw;
    text-align: center;
    font-size: 3.2vw;
    height: 3.2vw;
    line-height: 3.2vw;
    position: absolute;
    left: 0;
    bottom: 31.46666667vw;
    color: #000;
}
.main .part .loginBtn {
    position: absolute;
    left: 23.2vw;
    bottom: 16.53333333vw;
    border: 1px solid #f00;
    z-index: 9999;
}
.main .part .loginBtn :active{
opacity:0.6;
box-shadow: 2px 2px 5px #666;
transform: translateY(2px);
}
.main .part .btn{
    display: block;
    width: 53.6vw;
    height: 11.73333333vw;
    border-radius: 2.66666667vw;
    background-color: #d3b466;
    color: #fff;
    font-size: 4.26666667vw;
    text-align: center;
    line-height: 11.73333333vw;
}
.main .part .btn:active{
opacity:0.9;
box-shadow: 2px 2px 5px #666;
transform: translateY(2px);
background:#ff0000;
}
 
</style>
<script>
function go(dom){
console.info(dom);
//dom.style.background = '#ff0000';
alert(123);
}
</script>
</html>



用vue写的，我把关键 代码 整理出来了， 大概的问题是：


1，一个input  和一个 button,

2， 不点击input 点击button 正常

3,  点击input 弹出输入框，点击键盘上的完成， 再点击button没反应了。要点击偏上一点才有效果。


微信 6.7.3 没问题，6.7.4的问题


演示视频 ： https://share.weiyun.com/50ZQTuR

回答关注问题邀请回答
收藏

6 个回答

  • 屁桃君
    屁桃君
    2018-12-05

    改进一下  

    document.body.addEventListener('focusout', () => {
            var top = document.body.scrollTop
            //alert(top)
            if(top != 0){
              top = top - 1
            }
            document.body.scrollTop = top
        })

    这样就不会强制滚动到顶部 同时可以解决问题  而且不用每个input textarea 都绑定事件 只要写一次就好了

    2018-12-05
    有用 1
    回复
  • Kong
    Kong
    2018-11-28

    有计划什么时候改好吗？影响挺大的，谢谢。

    2018-11-28
    有用 1
    回复
  • HS
    HS
    2018-11-27

    问题已复现，我们会在后续版本中进行修复。

    2018-11-27
    有用 1
    回复 4
    • 一灰
      一灰
      2018-11-27

      您好，有具体修复的时间吗

      2018-11-27
      赞
      回复
    • 亞當Adam💋
      亞當Adam💋
      2018-11-29回复一灰

      我也遇到这问题，我的临时解决方案就是input失去焦点设置document.body.scrollTop = 0

      <textarea @blur="messageBlur"></textarea>

      messageBlur () {

          document.body.scrollTop = 0

      }


      2018-11-29
      赞 4
      回复
    • 💥 ⃢👁-👁⃢💦行走江湖
      💥 ⃢👁-👁⃢💦行走江湖
      2018-11-29回复亞當Adam💋

      解决了我的问题，赞

      2018-11-29
      赞 1
      回复
    • Z
      Z
      2019-01-07

      问题依然存在

      2019-01-07
      赞
      回复
  • 海杰君
    海杰君
    2019-07-08

    半年了，继续等大佬们解决该问题

    2019-07-08
    有用
    回复
  • y
    y
    2019-03-26

    你好，请问这个问题修复了吗


    2019-03-26
    有用
    回复
  • yiccccc
    yiccccc
    2018-11-30

    这个还跟ios系统有关哦，我的ios11，微信6.7.4正常。ios12.1，微信6.7.4就会有问题

    2018-11-30
    有用
    回复
请 登录 后发表内容
相关文档