摘要
最近在开发H5,就在开发过程中发现H5存在着一些坑,所以就总结一下在开发过程中遇到的坑以及解决办法,本文会持续的更新,同时也欢迎大家一起评论分享H5开发中遇到的坑、解决办法等。
常见的通用的H5开发问题
IOS端-H5开发问题
- 输入法收起隐藏页面留白
问题现象:ios端软键盘失去焦点(隐藏)后,页面不会回弹,页面下方会留下输入法块的白色块。
暴力解决方案:软键盘收起(隐藏)后,滚动一下页面,页面中的留白块块就会消失。所以只要在输入完毕后实现一下‘滚动’的操作就可以解决问题。
React(React Hook)暴力开发解决方案(代码实现部分):
// 输入键盘隐藏回弹
useEffect(() => {
document.addEventListener('focusout', function(e) {
let u = navigator.userAgent;
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isiOS) {
window.scrollTo(0, 0);
}
})
},[])
[注]:这个ios软键盘收起留白解决方案适应性不全(只适合表单中仅有一个input输入框且为单页面),表单中拥有多个input输入框时,切换input时也会触发scrollTo方法,造成input回弹闪烁异常问题。
- 多个input输入切换回弹闪烁
问题现象: 存在多个input输入框且页面可以滚动时,切换输入框产生回弹闪烁,影响用户体验;同时iOS微信中依旧存在软键盘收起留白问题。
终极解决方案: 经过调研了解到微信版本6.7.4以上会出现该问题。首先判断当前的设备以及当前微信版本号;其次当软键盘收起时,设置setTimeout方法,模拟软键盘弹起;最后获取当前滚动高度位置,软键盘收起滚动回当前滚动高度减1的位置即可。
React(React Hook)终极开发解决方案(代码实现部分):
useEffect(() => {
// 软键盘收起事件处理
const onFocusout = () => {
let u = navigator.userAgent;