H5页面 在iphone ios系统虚拟键盘不会落的问题
2020-07-18 05:12
871 查看
H5页面 在iphone ios系统虚拟键盘不会落的问题
在 H5 页面中,会发现在高版本的 IOS 系统中(ios12以上)和微信版本6.7.x以上,都会发现 input 等输入框,输入内容之后发现虚拟键盘消失,但是页面出现大面积白框。
解决办法
方法一
在页面中添加下面的js代码
document.addEventListener('focusout', () => { setTimeout(() => { let height = document.documentElement.scrollTop || document.body.scrollTop window.scrollTo(0, height + 1) window.scrollTo(0, height - 1) }, 20) })
方法二
input失去焦点时, 调用下面方法
function changeBlue(){ let u = navigator.userAgent, app = navigator.appVersion; let isIOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); if(isIOS){ setTimeout(() => { const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0 window.scrollTo(0, Math.max(scrollHeight - 1, 0)) }, 200) } }
解决安卓弹出的键盘遮盖文本框
changeblue(){ let u = navigator.userAgent, app = navigator.appVersion; let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; if(isAndroid){ setTimeout(function() { document.activeElement.scrollIntoViewIfNeeded(); document.activeElement.scrollIntoView(); }, 500); } }
Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。而Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动
转载于 https://www.cnblogs.com/xqmyhome/p/11066132.html
相关文章推荐
- webview 加载H5页面音乐不会自动播放问题解决方案
- webview加载H5页面使用本界面且可以点击(浏览器不会跳转)
- 移动端H5页面遇到的问题总结
- H5页面选IOS系统滑动卡动问题!
- HTML5页面被运营商进行DNS劫持问题及解决方案,app中h5页面源码的获取
- 安卓端支付宝集成后支付宝H5页面无法调起的问题
- iOS 调用h5页面 视频不自动播放的问题
- H5页面ios键盘遮挡input问题
- ipad iphone 页面宽度和字体变大的问题
- H5页面中删除iPhone自带样式
- H5页面适配所有iPhone和安卓机型的六个技巧
- Android WebView页面中点击H5页面没有响应问题。
- 解决vue路由跳转页面,滚动条默认在页面底部的问题(ios会出现这个问题,安卓不会)
- 关于H5页面背景音乐播放的问题
- 微信h5页面授权登录的code拼接问题以及解决方案
- wap页面之iphone设备字体偏大问题
- h5页面上拉加载下拉刷新问题
- iPhone X适配手机端H5页面
- javascript解决在safari浏览器中使用history.back()返回上一页后页面不会刷新的问题
- 关于spring-mvc前端控制器,jsp页面跳转不会被拦截的问题