解决vuejsIOSH5focus⽆法⾃动弹出键盘的问题
IOS不⾃动弹出键盘，必须⼿动触发⼀下focus才⾏，不能⾃动调⽤，所以需要诱导⽤户点击某个按钮触发focus，最终修改的⽅法，默认隐藏密码输⼊框，隐藏不能⽤v-if或者是v-show,⽤position:absolute, top:-1000，然后点击输⼊密码将top改为视窗内，并且调⽤focus的⽅法
代码如下，有问题欢迎评论
<template>
<div class="pwdpush-box">
<h4 class="enter-password" @click="enterPwd">输⼊密码</h4>
<div class="phonenum-show" :class="pushShow?'':'write-phonenum-1000'">
<div class="write-phonenum">
<p @click.prevent="pushShow = false">使⽤余额⽀付 8864</p>
<p>⽀付密码：</p>
<ul class="write-input clearfix">
<input type="tel" ref="input" maxlength="6" class="realInput" v-model="realInput" autofocus @keyup="getNum()" v-focus @keydown="delNum()">
<li v-for="disInput in disInputs"><input type="tel" maxlength="1" disabled v-model="disInput.value"></li>
</ul>
<mt-button size="large" @click="goPay">确认⽀付</mt-button>
</div>
</div>
</div>
</template>
<script>
import { Field,Toast ,Indicator} from 'mint-ui';
import {headerNav,bottomShow} from '../../vuex/actions/actionDoc'
export default {
name: 'packe',
vuex: {
actions:{
headerNav,
bottomShow
}
},
data(){
return{
messagepacket:false,
packets:[
],
disInputs:[{value:''},{value:''},{value:''},{value:''},{value:''},{value:''}],
realInput:'',
pushShow:false
}
},
mounted(){
this.headerNav(false)
this.bottomShow(false)
},
methods:{
getNum(){
for(var i=0;i&alInput.length;i++){
this.disInputs[i].alInput.charAt(i)
// 表⽰字符串中某个位置的数字，即字符在字符串中的下标。
}
},
delNum(){
var oEvent = window.event;
if (oEvent.keyCode == 8) {
alInput.length>0){
this.alInput.length-1].value=''
}
}
},
goPay(){
console.alInput)
},
enterPwd(){
this.pushShow = true;
this.$refs.input.focus()
}
}
}
</script>
自动弹窗代码<style lang="less" sconed>
.enter-password{
text-align: right;
color:#1D890D;
font-size: 18px;
line-height: 2;
margin-top:20px;
padding-right: 20px;
}
.phonenum-show{
background: rgba(0,0,0,0.6);
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index: -1;
}
.getback-title span{position: absolute;right:0;top:3px;width:15px;height:15px;display: inline-block;}
.write-phonenum-1000{
top:-1000px!important;
}
.write-phonenum{
position: absolute;
top:50%;
margin-top:-100px;
left:0;
right:0;
bottom:0;
z-index: 2;
padding:30px 10px 0;
background: #fff;
}
.write-phonenum p{
font-size: 14px;
margin-left:30px;
line-height:2;
}
.write-phonenum p span{color: #3b90d1;}
.
write-input {width:312px; margin:10px auto; position: relative;}
.write-input li{float: left;width:30px;height:30px; margin: 0 10px; border:1px solid #888888;}
.write-input li input{-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none;resize: none;outline: none;border:0;width:30px;line-height: 30px;text-align: center;height: 30px;font-size:16px;} .write-phonenum .mint-button--default{background: #3b90d1;color:#fff;font-family: "微软雅⿊";font-size: 14px;width:80%;margin:10px auto;}
.realInput{
/* Keyword values */
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
resize: none;
outline: none;
border: 0;
z-index: 3;
position: absolute;
width: 290px;
height: 30px;
line-height: 30px;
background: none;
display: block;
left: 50%;
margin-left: -145px;
top: 34px;
opacity: 0;
font-size: 0px;
caret-color: #fff;
color: #000;
text-indent: -5em;
font-size: 30px;
top:1px;
}
input[type="tel"]:disabled{background-color: #fff;}
</style>
以上这篇解决vue js IOS H5focus⽆法⾃动弹出键盘的问题就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论