在做一个react项目,发现当我们调用软键盘的时,页面会被遮挡。android和ios的表现形式还不一样。
React.useEffect(() => { window.addEventListener('resize', () => { if (document.activeElement) { if (['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName)) { setTimeout(() => { (document.activeElement as any).scrollIntoViewIfNeeded(); }, 200); } } }); }, []);以上方法可以解决百分之90的问题,但是有的android调用软键盘的时候不会触发resize,这种就给我们的处理带来的很大的难度,我目前的做法是
let u = navigator.userAgent; let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
const handleEditorFocus = React.useCallback(() => { console.log(window.innerHeight) if (isAndroid) { setEditorHeight(true) } }, [isAndroid]);当我们判断为android机型的时候可以更行我们的编辑器的高度为屏幕高度的一半,
目前还有些兼容问题后续有更好的解决办法会更新