解决ios输入框无法自动弹起的问题

都知道，在安卓系统中，要调起软键盘很简单，input框加autofocus或者获取dom元素触发focus事件即可

但是对于ios：ios有个安全机制，只有用户点击才能调起键盘（audio的播放也是，需要用户主动触发的事件才能触发，例如点击或者滚动屏幕）

需求：在第一个页面点击输入框跳到第二个页面时自动弹起软键盘

实现：在第一个页面点击输入框时触发输入框聚焦事件，这时候系统认为用户已经进行过点击行为并且已经触发过输入框的聚焦事件了，项目中第一个页面输入框为disabled，所以需要加一个额外的屏幕给一个屏幕不可见的输入框（不要用v-if跟v-show，而是用定位或者透明之类的样式使其在屏幕中不可见），在disabled输入框点击时触发这个不可见的输入框的聚焦事件，

然后使用vue路由跳转第二个页面，在第二个页面中的mounted里面加$nexttick触发输入框的focus事件

注：这里有个问题就是vue路由跳转在浏览器看来还是在同一页面中，所以第一次通过用户主动点击触发了focus事件之后在第二个页面也能触发focus，如果这里第一个页面跳第二个页面时用的浏览器的location或者其他方式跳转时是否能触发还有待验证

解决ios输入框无法自动弹起的问题相关推荐

解决iOS h5 audio自动播放（亲测有效）
微信H5页面,实现audio自动播放: function initMusic() {//动态创建一个audio节点var audio = document.createElement('audio') ...
解决ios下拍照自动旋转问题
<input class="sr-only" id="inputImage" name="file" type="file& ...
iOS 解决键盘遮挡输入框问题，输入框随键盘弹起上移，切换输入法时动态调整 (Swift)
最近在项目中需要解决苹果系统输入法遮挡输入框的问题,预期结果为: 若键盘弹出后会遮挡输入框,则输入框随键盘弹起上移,输入法切换时输入框始终保持在距键盘上方 4pt 处; 若键盘弹出后不会遮挡输入框,但 ...
ios端自动获取输入框焦点,解决ios手机中input输入框光标过长的问题
在项目中做移动端页面,发现IOS 的光标大小很大,和安卓的完全不一样,思考怎么调整大小,通过实践和尝试,找到了解决方法,现分享给大家. 修改前css部分代码: .receiving-info .rec ...
解决uni-app微信小程序底部input输入框，键盘弹起时页面整体上移问题
一.存在的问题: 微信小程序聊天界面,当input 框获取焦点时会自动调起手机键盘,当键盘弹起时,会导致页面整体上移,页面头信息会消失不见. 二.需要实现的效果键盘弹出时, 底部的 ...
H5 自动播放背景音频，兼容安卓和苹果手机， ios createInnerAudioContext 无法自动播放解决
原因应该是IOS不允许自动播放音频,有两种解决方法在main.js Vue.prototype.innerAudioContext = uni.createInnerAudioContext(); ...
解决iOS机型点击输入框不能聚焦的问题
解决iOS机型点击输入框不能聚焦的问题参考文章: (1)解决iOS机型点击输入框不能聚焦的问题 (2)https://www.cnblogs.com/blackbentel/p/11138017.h ...
h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题
h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题参考文章: (1)h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题 (2)https://www.cnblogs.com/bl ...
解决ios下的微信页面背景音乐无法自动播放问题
前言在做各种HTML5场景页面的时候,插入背景音乐是一个很普遍的需求.我们都知道,iOS下的safari是无法自动播放音乐的,以至一直以来形成了一种认知,iOS是无法自动播放媒体资源的.直到微信火爆 ...

解决ios输入框无法自动弹起的问题

解决ios输入框无法自动弹起的问题相关推荐

最新文章

热门文章