在微信公众号开发中遇到了的问题: 点击事件触控区域出错
网上的帖子:
解决方案参考:
目前有两种方式: 第一种是网上的解决方案,第二种是自己想到的解决方案,注:在react实现
方案1:
input 元素
<input ref="mobile" type="tel" placeholder="请填写您的手机号"
onBlur={()=>{
Utils.iOSKeyboardFixer();
}}
/>
Utils 中的控制方式:
export default {
...,
iOSKeyboardFixer() {
if(!this.isIOS()) {
return;
}
// 处理bug 方式1
document.body.scrollTop = document.body.scrollTop;
}
}
方案2:
input 元素
<input ref="mobile" type="tel" placeholder="请填写您的手机号"
onBlur={(e)=>{
Utils.iOSKeyboardFixer(e.target.getBoundingClientRect().top);
}}
/>
Utils 中的控制方式:
export default {
...,
iOSKeyboardFixer(top) {
if(!this.isIOS()) {
return;
}
// 处理bug 方式2
window.scrollTo(0, 0); // 先滚动到顶部
window.scrollTo(0, top); // 再滚动到原来的位置
}
}