移动端键盘弹起导致的页面fixed定位元素布局错乱
解决办法:弹出键盘时,隐藏按钮
componentDidMount:
// 修复键盘弹起导致的页面fixed定位元素布局错乱
if (device === 'ios') {
window.addEventListener('focusin', this.focusin);
window.addEventListener('focusout', this.focusout);
} else {
const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
this.setState({ clientHeight });
window.addEventListener('resize', this.resize);
}
// 移除监听
componentWillUnmount() {
window.removeEventListener('resize', this.resize);
window.removeEventListener('focusin', this.focusin);
window.removeEventListener('focusout', this.focusout);
}
focusin = () => {
this.setState({ showSubmit: false });
}
focusout = () => {
this.setState({ showSubmit: true });
}
resize = () => {
const clientHeightN = document.documentElement.clientHeight || document.body.clientHeight;
const { clientHeight } = this.state;
if (clientHeight > clientHeightN) { // 键盘弹出
this.setState({ showSubmit: false });
} else { // 键盘收起
this.setState({ showSubmit: true });
}
}