解决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 相关文章推荐
javascript multibox 全选
Mar 22 Javascript
js parentElement和offsetParent之间的区别
Mar 23 Javascript
JS鼠标滑过图片时切换图片实现思路
Sep 12 Javascript
JavaScript cookie的设置获取删除详解
Feb 11 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
vue v-model的用法解析
Oct 19 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
在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出错界面
2006/10/09 PHP
PHP模块memcached使用指南
2014/12/08 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
jQuery 解析xml文件
2009/08/09 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
layer实现弹窗提交信息
2016/12/12 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
jquery写出PC端轮播图实例
2018/01/26 jQuery
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
前端vue+elementUI如何实现记住密码功能
2020/09/20 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python中偏函数partial用法实例分析
2015/07/08 Python
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
python exit出错原因整理
2020/08/31 Python
Python浮点型(float)运算结果不正确的解决方案
2020/09/22 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
JAVA代码查错题
2014/10/10 面试题
大学毕业感言100字
2014/02/03 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
法院干警四风问题个人对照检查材料思想汇报
2014/10/07 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
详解Redis基本命令与使用场景
2021/06/01 Redis
django中websocket的具体使用
2022/01/22 Python