解决vue js IOS H5focus无法自动弹出键盘的问题
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无法自动弹出键盘的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
一.前言 三年.net开发转前端已经四个月了,前端主要用webpack+vue,由于后端转过来的,前端不够系统,希望分享下开发心得与园友一起学习. 图片的上传之前都是用的插件(ajaxupload),或者传统上传图片的方式,各有利弊:插件的问题是依赖jq并且会使系统比较臃肿,还有传统的web开发模式 前后端偶尔在一起及对用户体验要求低,现在公司采用webpack+vue+restfullApi开发模式 前后端完全分离,遵从高内聚,低偶尔的原则,开发人员各司其职,一则提升开发效率(从长期来看,短期
-
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! vue-awesome-swiper就是其中一个前辈们产出的结晶.就看首尾两个单词,就知道他是vue和swiper的爱情之子了. vue-awesome-swiper官网是中文文档,妈妈再也不用担心我读api啦."基于 Swiper4.适用于 Vue 的轮播组件".在产品催着进度的紧张环境下,在四处搜寻解决方案的情况下,这句话简直发着光啊. 具体怎么用,官方文档写的很清楚,但我还是
-
vue中用H5实现文件上传的方法实例代码
整理文档,搜刮出一个vue中用H5实现文件上传的方法实例代码,稍微整理精简一下做下分享. 1.图片上传 <img v-if="personInfo.photoUrl" :src="headPreFix + personInfo.photoUrl" style="height:126px;max-width:133px;margin: 25px 0;"> <img v-else src="../../assets/def
-
用vuex写了一个购物车H5页面的示例代码
通过购物车的一个案列,把vuex学习了一篇. vuex概念浅谈 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.简单的来说,就是数据共用,对数据集中起来进行统一的管理. 如果您的应用够简单,您最好不要使用 Vuex.一个简单的 global event bus 就足够您所需了.但是,如果您需要构建是一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的
-
Vue仿支付宝支付功能
先给大家上个效果图: <div class="goods-psd"> <p class="apply-title"> 请输入支付密码 </p> <p style="margin: 0.2rem">确认支付 <span>{{password}}</span> </p> <div class="psd-container"> <i
-
vue写h5页面的方法总结
下面就是小编带给大家的如何用vue写h5页面方法操作,希望能够给你们带来一定的帮助,谢谢大家的观看. 1.当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配. 2.之前介绍了一篇关于移动端rem布局方案,这大致是网易H5的适配方案.不过实践中发现淘宝开源的可伸缩布局方案效果更好且更容易使用.方案总结为:根据屏幕大小 / 750 = 所求字体 / 基准字体大小比值相等,动态调节html的
-
Vue的H5页面唤起支付宝支付功能
目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付.下面介绍一下Vue中H5页面如何使用支付宝支付.其实很简单的,只不过是调自己后台的一个接口而已(后台根据支付宝文档,写好支付接口). 触发支付宝支付调用后台接口,后台会返回支付宝提供的form表单,我们只要在vue里面创建新节点,将返回的form表单append进去,并提交就可以唤起支付宝支付.另在此说一下这个 returnUrl , 它是支付后支付宝回调的页面.具体可以根据自身业务,后台写死或者由前端控制. methods () {
-
详解Vue开发微信H5微信分享签名失败问题解决方案
关于Vue中路由使用history模式,开发微信H5页面分享时在安卓上签名有效成功,但是在IOS设备上一直报错签名失效问题 问题描述:在Vue开发过程中,路由使用History模式下,在使用微信分享时,在微信开发者工具上一切正常.在安卓上一切正常. 但是!!!在IOS上反复报签名错误. 以下是真机测试截图,划掉黑线的是我个人IOS设备分享出来一直是服务号,接着下面分享出来自定义内容是安卓分享正常,话不多说上图!!!! 我的代码: 需求描述:需要从首页进入活动详情页,然后在详情页分享详情页面内容.
-
解决vue js IOS H5focus无法自动弹出键盘的问题
IOS不自动弹出键盘,必须手动触发一下focus才行,不能自动调用,所以需要诱导用户点击某个按钮触发focus,最终修改的方法,默认隐藏密码输入框,隐藏不能用v-if或者是v-show,用position:absolute, top:-1000,然后点击输入密码将top改为视窗内,并且调用focus的方法 代码如下,有问题欢迎评论 <template> <div class="pwdpush-box"> <h4 class="enter-pass
-
快速解决vue在ios端下点击响应延时的问题
在apicloud开发中遇到的问题:用vue.js的点击事件,安卓点击响应迅速而ios点击响应有延时(大约300ms). 解决方案如下: 引入<script type="text/javascript" src="/js/mobile/fastclick.js"></script> 然后在页面加载时,使用 $(function() { FastClick.attach(document.body); }); 以上这篇快速解决vue在ios端下
-
如何解决vue在ios微信"复制链接"功能问题
这个问题在安卓上是完全没有问题的,可是到了iPhone上就彻底失效了.因为ios微信对vue路由中的#号识别问题. 我的解决办法是在初始进入项目时重新拼接项目地址,再重定向到拼接的地址去. 先获取到#号前的路由地址,再手动添加我们的#号和当前项目地址后缀: 在路由router.js里的beforeEach函数写 截取地址 // 重定向功能,为解决ios微信上复制链接功能不能复制到动态路由问题 // 获取地址前段部分,不算参数 var replaceUrl = window.location.hr
-
解决vue.js在编写过程中出现空格不规范报错的问题
找到build文件夹下面的webpack.base.conf.js文件. 然后打开该文件,找到图下这段代码,把他注释掉. 注释掉之后,再进行子页面等编写的时候,空格不规范的情况下也不会再报错啦.因为这个报错对于初学者来说实在头大.哈哈O(∩_∩)O哈哈~ 我标注的这些地方,原本是有严格的空格规范要求的,这些报错真是另人烦躁呀o(╥﹏╥)o 反正我把这个问题解决了,特别开心哒哒哒~~~ 以上这篇解决vue.js在编写过程中出现空格不规范报错的问题就是小编分享给大家的全部内容了,希望能给大家一个参考
-
解决Vue.js由于延时显示了{{message}}引用界面的问题
在使用Vue写应用时发现一个问题,每当进入一些有延时的(如网络API请求)操作时,会先闪一下未编译的 Mustache 标签{{ message }},这让人很不爽. 在官网找到了解决方案:v-cloak 参照官网做法: 定义[v-cloak]的style <style> [v-cloak] { display: none; } </style> 使用了Mustache标签的地方加上v-cloak <div v-cloak>{{ message }}</div&g
-
解决vue.js this.$router.push无效的问题
如下所示: login() { if(this.email.length > 0 && this.password.length >0) { this.$http.post('/api/login', { user: this.email, password: this.password }) .then(res => { let userPwd = res.data if(this.password == userPwd) { this.$router.push(&qu
-
快速解决vue.js 模板和jinja 模板冲突的问题
jinjia和vue.js默认的模板转义符都是{{}} 目前的解决办法是修改vue.js的转义符,将原来的{{}}替换为其他标签,我改为{[]} 版本1.x和2.x方法如下 // 1.x Vue.config.delimiters = ['{[', ']}'] // 2.x new Vue({ delimiters: ['{[', ']}'] }) 以上这篇快速解决vue.js 模板和jinja 模板冲突的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
解决vue.js 数据渲染成功仍报错的问题
最近在做一个vue项目,用的是官方推荐的axios请求数据,数据结构是一级对象嵌套二级对象,发现一级对象数据渲染不报错,二级数据渲染报错.很是郁闷!data函数如下 export default { name: 'hello', data() { return { card:{} } } } 返回的数据如下: { "object":{ "subObject":"123", ... } } 报错的原因是在data函数return的card里没有二级
-
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
最近学习vuejs看例子中用$on无法监听子组件$emit触发事件: 使用版本 vue.js 2.2.5 参考文献 1.vuejs API 2.解决实例 问题分析 1.之前写的自定义组件事件触发为this.$emit("myclick",this.todo.text);,这样this指的是todo-item的每一项,而最后vm.$on监听的是app组件,也就出说监听的是父节点,而触发的是子节点,故监听不到这个事件的. 解决思路 1.将触发事件放在父节点上触发,就可以监听到触发的事件了,
-
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
错误用法: <img src="http:0.0.0.127/{{item.imgname}}" alt=""> 正确用法: <img src="'http:0.0.0.127/'+item.imgname" alt=""> 绑定属性的时候,前面加: 属性的值可以用表达式,但注意字符串拼接的时候要加引号 以上这篇解决Vue.js 2.0 有时双向绑定img src属性失败的问题就是小编分享给大家的全部内