关于H5 APP手机虚拟键盘和position: fixed;冲突的处理

做顶部搜索功能,在点击搜索框的时候,显示一定的历史搜索记录。
在搜索框被点击的时候,有取消的按钮链接用于取消搜索。

流程如下:

搜索框获得焦点,手机会弹出软键盘。 底部的position: fixed;菜单就会顶上来,有人理解为fixed失效,而我觉得底部fixed的参考受到软键盘的影响,不能准确固定于底部。
在iphone测试的时候,点击完成按钮取消软键盘,底部是正常显示。
点击取消链接,使input失去焦点,底部footer会在屏幕中间停留一下 然后迅速显示到底部,严重影响浏览。
曾想过用一个timout延迟显示底部,并且这样确认是可靠的,底部的position: fixed;延迟500ms显示,位置正确。 但无法把握与键盘消失的时间对接上,有时候键盘消失很久才显示底部。
有时候又提前显示。这个值不好把握,也许不同设备键盘消失时间不同。
通过网上查不少资料,大多数人都选择,在弹出软键盘的时候,人工隐藏掉主体内容使其高度只有半屏幕多或刚好一屏,反正不能超过。
然后取消搜索的时候,再显示主体内容。
这样就能很好地处理了这个问题。
66.jpg
然后幻想着,是不是所有APP的搜索框一点击,就调出的是空白页面加载历史记录,有没有出于这个原因呢。


标签: h5, app

非特殊说明,本博所有文章均为博主原创。

最新文章

发表评论