avatar

前端/h5与安卓混合开发坑

问题1:input h5 键盘在安卓端被遮挡。
h5端判断安卓环境下,手动添加聚焦事件
安卓原声端必须配合使用特殊控件来处理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
onFocus={() => bindAndroidScroll()}

//安卓端绑定输出框focus滚动事件
function bindAndroidScroll() {
const UA = navigator.userAgent;
const isAndroid = /android|adr|linux/gi.test(UA);
if (isAndroid) {
if (
document.activeElement.tagName == 'INPUT' ||
document.activeElement.tagName == 'TEXTAREA'
) {
window.setTimeout(function () {
document.activeElement.scrollIntoViewIfNeeded();
}, 500);
//安卓机有些反应较慢。这里的延时加长才能生效
}
}
}

scrollIntoViewIfNeeded 这个api去了解一下。

文章作者: 小黑
文章链接: http://yoursite.com/2023/01/17/前端/h5与安卓混合开发坑/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 小黑的小站
打赏
  • 微信
    微信
  • 支付寶
    支付寶
2