解决苹果手机虚拟键盘挡住输入框

This commit is contained in:
red-deng-deng 2021-12-10 16:18:42 +08:00
parent 62bc141bc5
commit 757ab5f813
2 changed files with 10 additions and 9 deletions

View File

@ -162,14 +162,14 @@
<div> <div>
<input :type="acctype" onkeyup="this.value=this.value.replace(/\D/g,'')" v-if="acctype=='tel'" <input :type="acctype" onkeyup="this.value=this.value.replace(/\D/g,'')" v-if="acctype=='tel'"
onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" :maxlength="maxlen" v-model="account" onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" :maxlength="maxlen" v-model="account"
:placeholder="placeholder"> :placeholder="placeholder" @focus="(e)=>focusFn(e)">
<input :type="acctype" onkeyup="this.value=this.value.replace(/\D/g,'')" v-if="acctype=='tel'" <input :type="acctype" onkeyup="this.value=this.value.replace(/\D/g,'')" v-if="acctype=='tel'"
onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" :maxlength="maxlen" v-model="reaccount" onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" :maxlength="maxlen" v-model="reaccount"
placeholder="请再次输入"> placeholder="请再次输入" @focus="(e)=>focusFn(e)">
<input :type="acctype" :maxlength="maxlen" v-model="account" v-if="acctype!='tel'" <input :type="acctype" :maxlength="maxlen" v-model="account" v-if="acctype!='tel'"
:placeholder="placeholder"> :placeholder="placeholder" @focus="(e)=>focusFn(e)">
<input :type="acctype" :maxlength="maxlen" v-model="reaccount" v-if="acctype!='tel'" <input :type="acctype" :maxlength="maxlen" v-model="reaccount" v-if="acctype!='tel'"
placeholder="请再次输入"> placeholder="请再次输入" @focus="(e)=>focusFn(e)">
</div> </div>
<span class="sureBtn" @click="defineBtn()" :style="{'background':'bgcolor'}">确认</span> <span class="sureBtn" @click="defineBtn()" :style="{'background':'bgcolor'}">确认</span>
</div> </div>
@ -213,7 +213,7 @@
data() { data() {
return { return {
swiperDataList: [], //轮播 swiperDataList: [], //轮播
layout: 2, layout: 3,
maskshow: false, maskshow: false,
proname: '黄金爱奇艺', proname: '黄金爱奇艺',
promtshow: false, promtshow: false,
@ -226,7 +226,6 @@
placeholder: '请输入手机号', placeholder: '请输入手机号',
maxlen:11, maxlen:11,
iptshow: false, iptshow: false,
orderNo: '',
loading: true, loading: true,
lastid:0, lastid:0,
acctype:'text', acctype:'text',
@ -255,6 +254,10 @@
this.exchangeCommity = item; this.exchangeCommity = item;
this.gstatus = item.available; this.gstatus = item.available;
}, },
focusFn(a){
let ele=document.querySelector('.ipt_frame');
ele.scrollIntoView({block: "end", behavior: "smooth"});
},
// 单条弹框 // 单条弹框
openDialog() { openDialog() {
this.promtshow = true; this.promtshow = true;
@ -265,7 +268,6 @@
}, },
//根据token获取商品信息 //根据token获取商品信息
getGoods() { getGoods() {
let self = this; let self = this;
let data = { let data = {
"token": sessionStorage.getItem('token'), "token": sessionStorage.getItem('token'),

View File

@ -11,9 +11,8 @@
<script type="text/javascript" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/axios.js?v=1367936144322"> <script type="text/javascript" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/axios.js?v=1367936144322">
</script> </script>
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/loading.css"> <link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/loading.css">
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api.js?v=1"></script> <script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api.js?v=133"></script>
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/homepage.css?v=12"> <link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/homepage.css?v=12">
<!-- <script src="./api.js"></script> -->
</head> </head>
<style scoped> <style scoped>