H5 form 表单 position:fixed 遇到IOS软

2019-07-29  本文已影响0人  QLing09

当做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软键盘关闭,刚好一屏的页面会多出高度。
对于以上情况解决方案可以使用【方案一】更好解决这种显示问题。

上一篇下一篇

猜你喜欢

热点阅读