美文网首页
H5 form 表单 position:fixed 遇到IOS软

H5 form 表单 position:fixed 遇到IOS软

作者: QLing09 | 来源:发表于2019-07-29 11:31 被阅读0次

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

    相关文章

      网友评论

          本文标题:H5 form 表单 position:fixed 遇到IOS软

          本文链接:https://www.haomeiwen.com/subject/oubvrctx.html