当做H5 手机端开发时,固定form位置position:fixed,输入需要的信息填写,怎么提交按钮焦点变了??
针对这种情况可以有两个方案解决??
方案一
重新恢复页面滚动到顶部位置,如果页面刚好一屏方案很完美,也能解决软键盘关闭后IOS上面多出的滚动条。如果页面超过一屏,而且输入框在下一屏滚动的位置设置点不能为0了,需要设置到下一屏的高度。
document.body.addEventListener('focusout', () => {
let ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('iphone') > 0 || ua.indexOf('ipad') > 0) {
window.scroll(0, 0);
}
});
方案二
可以设置form表单页面固定位置position:absolute。可以保证软键盘关闭页面其他事件不失焦。IOS软键盘关闭,刚好一屏的页面会多出高度。
对于以上情况解决方案可以使用【方案一】更好解决这种显示问题。