本人测试过在华为、oppo、小米、vivo等部分机型下会出现输入法弹出时按钮被抬升的问题
目前IOS没有遇到,只在Android机型下会稳定浮现,根据本人的思路理解,应是部分机型系统下,有检测浏览器脚本或者标签的行为
Android:
解决方案:
检测页面高度变化(输入法弹出时页面高度时会变化!)
state = {
originHeight: document.documentElement.clientHeight, // 默认高度,用作比较
isOriginHeight: true, // 当前高度是否仍等于默认高度·
};
componentDidMount() {
window.addEventListener('resize', this.listenDocumentSize);
}
listenDocumentSize = () => {
const {
originHeight } = this.state;
const currentHeight = document.documentElement.clientHeight;
if (originHeight - currentHeight > 120) {
// 次值需要根据被抬升的 Dom 进行调整
this.setState({
isOriginHeight: false });
} else {
this.setState({
isOriginHeight: true });
}
};
componentWillUnmount() {
window.removeEventListener('resize', this.listenDocumentSize);
}
<div style={
{
display: isOriginHeight ? 'block' : 'none' }}>
提交
</div>