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无法自动弹出键盘的解决方法相关推荐

酒浓码浓 - ios进入页面自动弹出键盘
ios移动端进入页面怎么自动弹出键盘最近做的H5页面业务上有个需求,要在移动端,进入到某个页面自动聚焦input的焦点并弹出软键盘!!! 查了一圈,发现autofocus,在android上只能聚焦 ...
android不自动弹出键盘事件,解析android中隐藏与显示软键盘及不自动弹出键盘的实现方法...
1.//隐藏软键盘 ((InputMethodManager)getSystemService(INPUT_METHOD_SERVICE)).hideSoftInputFromWindow(Widge ...
计算机莫名其妙的游戏网页弹出,自动弹出游戏网页怎么办自动弹出游戏网页解决方法【详解】...
自动弹出游戏网页怎么办? 网页是一个文件,他存放在世界某个角落的某一部计算机中,而这部计算机必须是与互联网相连的. 好的网页带给用户信息,但要是老是弹出无聊的广告网页那就有点烦了.那么,如何还电脑一个 ...
cmd打开jupyter不自动弹出浏览器的解决方法
问题界面: 第一种方法可以直接复制地址链接到浏览器使用.以下图片红框里任意一个地址. 第二种方法 1.进入cmd(windows+r)输入jupyter notebook --generate-co ...
jupyter打开后没有自动弹出浏览器的解决方法
第一步:打开cmd 第二步:输入: jupyter notebook --generate-config 出现如下画面第三步:进入如上路径,打开"jupyter_notebook_conf ...
vue.js 引用背景图 background 无效的3种解决办法
#vue.js项目中,出现css调用background背景图无效?如何解决? 或者调用<img>标签,也无效果? 直接上代码,自行对比查找一下: 效果图预览 1. 正确的代码,示例如下: ...
安装node.js、webpack、vue 和vue-cli 以及安装速度慢/不成功的解决方法
安装node.js.webpack.vue 和vue-cli 以及安装速度慢/不成功的解决方法参考文章: (1)安装node.js.webpack.vue 和vue-cli 以及安装速度慢/不成功的 ...
vue项目中将视频链接分享至推特的解决方法及踩坑记录
vue项目中将视频链接分享至推特的解决方法及踩坑记录将动态改变的视频链接分享至推特,并希望能直接在推特上播放视频的需求实现方法及踩坑记录如果只要将文本或链接分享到推特,不需要推特识别图片/视频等媒 ...
vue使用marked解析markdown文本遇到的坑及解决方法
vue使用marked解析markdown文本遇到的坑及解决方法 1. 前言最近在搭建自己的博客网站 https://lyuanzhi.com,不免遇到了要把markdown文本转化为html代码的 ...

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

vue js IOS H5focus无法自动弹出键盘的解决方法相关推荐

最新文章

热门文章