解决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 控制弹出窗口
Apr 10 Javascript
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
JavaScript 字符串乘法
Aug 20 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
Jan 17 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
js中判断用户输入的值是否为空的简单实例
Dec 23 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
基于openlayers实现角度测量功能
Sep 28 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超级全局变量
2010/01/26 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
利用php-cli和任务计划实现刷新token功能的方法
2017/05/03 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
js jquery数组介绍
2012/07/15 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
Python3.2中的字符串函数学习总结
2015/04/23 Python
Python的装饰器模式与面向切面编程详解
2015/06/21 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
Anaconda下配置python+opencv+contribx的实例讲解
2018/08/06 Python
python实现停车管理系统
2018/11/30 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
Django 批量插入数据的实现方法
2020/01/12 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
食品委托检验协议书范本
2014/09/12 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
领导视察通讯稿
2015/07/18 职场文书
2016大学迎新欢迎词
2015/09/29 职场文书
中学音乐课教学反思
2016/02/18 职场文书