解决vue js IOS H5focus无法自动弹出键盘的问题

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" style="margin-top:80px;" @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<this.realInput.length;i++){
 this.disInputs[i].value=this.realInput.charAt(i)
 // 表示字符串中某个位置的数字，即字符在字符串中的下标。
 }
 },
 delNum(){
 var oEvent = window.event;
 if (oEvent.keyCode == 8) {
 if(this.realInput.length>0){
 this.disInputs[this.realInput.length-1].value=''
 }
 }
 },
 goPay(){
 console.log(this.realInput)
 },
 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无法自动弹出键盘的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。