项目背景
taro搭建小程序, webview标签引入h5页面 点击input框把底部fixed固定的文案顶了上去,安卓手机
IOS 软键盘弹起表现
在 IOS 上，输入框（input、textarea 或 富文本）获取焦点，键盘弹起，页面（webview）并没有被压缩，或者说高度（height）没有改变，只是页面（webview）整体往上滚了，且最大滚动高度（scrollTop）为软键盘高度。
Android 软键盘弹起表现
同样，在 Android 上，输入框获取焦点，键盘弹起，但是页面（webview）高度会发生改变，一般来说，高度为可视区高度（原高度减去软键盘高度），除了因为页面内容被撑开可以产生滚动，webview本身不能滚动。
IOS 软键盘收起表现
触发软键盘上的“收起”按钮键盘或者输入框以外的页面区域时，输入框失去焦点，软键盘收起。
Android 软键盘收起表现
触发输入框以外的区域时，输入框失去焦点，软键盘收起。但是，触发键盘上的收起按钮键盘时，输入框并不会失去焦点，同样软键盘收起。
解决思路:
一开始: 参考了其他的众多文章,都是监听键盘弹出,收起 然后修改样式,或隐藏,贴一下,具体可去查找
有的文章是通过input框的聚焦和失焦,但是键盘上的小三角收起键盘的话,
是不会触发失焦事件的,所以按照这个思路的话我就去判断怎么监听键盘是否收起:
安卓: 通过页面高度监听键盘弹起
window.addEventListener('resize', function() {
if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
window.setTimeout(function() {
if ('scrollIntoView' in document.activeElement) {
document.activeElement.scrollIntoView(false)
} else {
document.activeElement.scrollIntoViewIfNeeded(false)
}
}, 0)
}
})
})
但是由于我在h5可以触发这个方法,在小程序界面却触发不了,研究了一下应该是taro 里面的webview标签没有开允许触发js的开关,我也没找到,有大佬知道的给我分享下,所以这个监听键盘的方法就被放弃了
最后解决: 通过flex布局把fixed固定的底部文案永远的固定在了下面,嘿嘿
