解决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 相关文章推荐
js实现的网页颜色代码表全集
Jul 17 Javascript
JsDom 编程小结
Aug 09 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 Javascript
javascript中RegExp保留小数点后几位数的方法分享
Aug 13 Javascript
JavaScript也谈内存优化
Jun 06 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
JavaScript获取表单enctype属性的方法
Apr 02 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
Aug 15 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
微信小程序常用简易小函数总结
Feb 01 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 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多用户读写文件冲突的解决办法
2013/11/06 PHP
php上传文件问题汇总
2015/01/30 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
Prototype Function对象 学习
2009/07/12 Javascript
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
2017/03/10 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
JS中准确判断变量类型的方法
2020/06/01 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
Python操作SQLite简明教程
2014/07/10 Python
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
python 接口_从协议到抽象基类详解
2017/08/24 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
python如何获取apk的packagename和activity
2020/01/10 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
施华洛世奇中国官网:SWAROVSKI中国
2020/06/16 全球购物
宿舍使用违章电器检讨书
2014/01/12 职场文书
七一表彰活动方案
2014/01/18 职场文书
蛋糕店的商业计划书范文
2014/01/27 职场文书
岗位聘任书范文
2014/03/29 职场文书
我的中国梦演讲稿初中篇
2014/08/19 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
大学生个人学习总结
2015/02/15 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书