app内嵌h5---iphone软键盘遮挡输入文字
app内嵌h5输入框被软键盘遮挡问题
·
1.产生问题的原因
在ios中,软键盘在页面最上层,软键盘的弹起不会引起窗口高度的变化,故而会遮挡原本处于最底部的输入框。
但是在android下,软键盘与窗口处于同一层,所以当软键盘弹起时,当前窗口会发生变化,故而不存在这个问题。
2.如何监听软键盘的弹出和隐藏
在ios中聚焦的时候软键盘会弹起,失去焦点的时候软键盘会收起
3.解决方案
(1)scrollIntoView
(2)监听聚焦和失焦的情况
(3)使用这个scrollIntoView,需保证当前输入框在原本的可视区域外
handleFocus(elem) {
console.log('软键盘弹起')
document.body.style.height = '100vh' + 软键盘高度
document.querySelector('.' + elem).scrollIntoView();
}
},
handleBlur() {
document.body.style.height = '100%'
console.log('软键盘隐藏')
}
4.关于scrollIntoView的介绍
Element 接口的 scrollIntoView() 方法会滚动元素的父容器,使被调用 scrollIntoView() 的元素对用户可见。
参考链接:MDN—scrollIntoView
更多推荐
已为社区贡献4条内容
所有评论(0)