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

IOS不自动弹出键盘，必须手动触发一下focus才行，不能自动调用，所以需要诱导用户点击某个按钮触发focus，最终修改的方法，默认隐藏密码输入框，隐藏不能用v-if或者是v-show,用position:absolute, top:-1000,然后点击输入密码将top改为视窗内，并且调用focus的方法

代码如下，有问题欢迎评论

 .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{
  
  -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;}

以上这篇解决vue js IOS H5focus无法自动弹出键盘的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。