解决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 尚未实现错误解决办法
Nov 27 Javascript
JQuery 表格操作(交替显示、拖动表格行、选择行等)
Jul 29 Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
JS获取元素多层嵌套思路详解
May 16 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
JS用最简单的方法实现四舍五入
Aug 27 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 Javascript
vue 开发企业微信整合案例分析
Dec 02 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
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
php数据库备份还原类分享
2014/03/20 PHP
Laravel框架学习笔记(二)项目实战之模型(Models)
2014/10/15 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
jQuery Ajax文件上传(php)
2009/06/16 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
jQuery实现ichat在线客服插件
2014/12/29 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
JS数组方法reduce的用法实例分析
2020/03/03 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
python递归计算N!的方法
2015/05/05 Python
Python中with及contextlib的用法详解
2017/06/08 Python
python3实现磁盘空间监控
2018/06/21 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
python实现ID3决策树算法
2018/08/29 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
如何用Python徒手写线性回归
2021/01/25 Python
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
美德好少年事迹材料
2014/01/19 职场文书
财务科科长岗位职责
2014/03/10 职场文书
竞争上岗实施方案
2014/03/21 职场文书
公司总经理岗位职责
2015/04/01 职场文书
详解Laravel制作API接口
2021/05/31 PHP
git中cherry-pick命令的使用教程
2022/06/25 Servers
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js