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


Posted in Javascript onAugust 30, 2018

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无法自动弹出键盘的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 动态扩展对象之另类视角
May 25 Javascript
js删除所有的cookie的代码
Nov 25 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 Javascript
jQuery实现复选框的全选和反选
Feb 02 Javascript
jQuery实现frame之间互通的方法
Jun 26 jQuery
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
vue的过滤器filter实例详解
Sep 17 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 #Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 #Javascript
对vue中methods互相调用的方法详解
Aug 30 #Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 #Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 #Javascript
解决jQuery使用append添加的元素事件无效的问题
Aug 30 #jQuery
jsonp跨域及实现百度首页联想功能的方法
Aug 30 #Javascript
You might like
PHP去除字符串最后一个字符的三种方法实例
2017/03/01 PHP
PHP基于timestamp和nonce实现的防止重放攻击方案分析
2019/07/26 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
Javascript中Eval函数的使用说明
2008/10/11 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
VueJs监听window.resize方法示例
2018/01/17 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
前端性能优化建议
2020/09/17 Javascript
Vue多选列表组件深入详解
2021/03/02 Vue.js
Python实时获取cmd的输出
2015/12/13 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
keras之权重初始化方式
2020/05/21 Python
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
Android面试题附答案
2014/12/08 面试题
网络程序员自荐信
2014/01/25 职场文书
电气自动化个人求职信范文
2014/02/03 职场文书
狼和鹿教学反思
2014/02/05 职场文书
结婚周年感言
2014/02/24 职场文书
借款协议书
2014/04/12 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
疾病证明书
2015/06/19 职场文书