解决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 解析xml文件
Aug 09 Javascript
Javascript中的String对象详谈
Mar 03 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
少女风vue组件库的制作全过程
May 15 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
加速vue组件渲染之性能优化
Apr 09 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记录日志的实现代码
2011/08/08 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
实例介绍PHP中zip_open()函数用法
2019/02/15 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
javascript replace方法与正则表达式
2008/02/19 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
Django实现文件上传和下载功能
2019/10/06 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
Python笔记之工厂模式
2019/11/20 Python
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
优秀学生自我鉴定范例
2013/12/18 职场文书
廉政教育心得体会
2014/01/01 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
2015年董事长秘书工作总结
2015/07/23 职场文书
一文读懂navicat for mysql基础知识
2021/05/31 MySQL
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server
Docker下安装Oracle19c
2022/04/13 Servers
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js