个人中心 | 微信开放社区

微信 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

GitHub账号

选择需要上架的开放服务

案例类型