解决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 相关文章推荐
Zero Clipboard js+swf实现的复制功能使用方法
Mar 07 Javascript
写得不错的jquery table鼠标经过变色代码
Sep 27 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
jQuery中$.each()函数的用法引申实例
May 12 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
js图片轮播插件的封装
Jul 21 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 Javascript
vue基于better-scroll实现左右联动滑动页面
Jun 30 Javascript
原生js实现九宫格拖拽换位
Jan 26 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设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
如何运行Python程序的方法
2013/04/21 Python
Python库urllib与urllib2主要区别分析
2014/07/13 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
Python格式化输出%s和%d
2018/05/07 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
Django认证系统实现的web页面实现代码
2019/08/12 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
css3针对移动端卡顿问题的解决(动画性能优化)
2020/02/14 HTML / CSS
材料加工硕士生求职信
2013/10/10 职场文书
团日活动策划书
2014/02/01 职场文书
我爱我校演讲稿
2014/05/21 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
土地租赁意向书
2014/07/30 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
个人工作表现自我评价
2015/03/06 职场文书
导游词之安徽醉翁亭
2020/01/10 职场文书
一篇带你入门Java垃圾回收器
2021/06/16 Java/Android
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL