鸳鸯亭资源网 Design By www.gvabc.com
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"> <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无法自动弹出键盘的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
鸳鸯亭资源网 Design By www.gvabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
鸳鸯亭资源网 Design By www.gvabc.com
暂无评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
2024年10月01日
2024年10月01日
- 纪钧瀚《钢琴阅读时光 雨中书店聆听轻音乐》[FLAC/分轨][399.62MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[320K/MP3][87.4MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[FLAC/分轨][184.94MB]
- 陈慧娴.2018-Priscilla-Ism演唱会3CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 郑秀文.1999-我应该得到(国)【华纳】【WAV+CUE】
- 陈家慧.2011-钢琴酒吧2CD【龙吟唱片】【WAV+CUE】
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[320K/MP3][45.01MB]
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[FLAC/分轨][109.13MB]
- 赞多《序章》[320K/MP3][45.54MB]
- 许巍.2004-每一刻都是崭新的【步升大风】【WAV+CUE】
- 群星.2024-四方馆影视原声带【韶愔音乐】【FLAC分轨】
- 陈雷.1997-安锁咧【金圆唱片】【WAV+CUE】
- 关淑怡.2013-MY.FAVORITE.SK.3CD【环球】【WAV+CUE】
- Sweety.2006-花言乔语【丰华】【WAV+CUE】
- 李恕权.2003-回·20年全精选2CD【SONY】【WAV+CUE】