React调用软键盘处理

2,167 阅读1分钟

在做一个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机型的时候可以更行我们的编辑器的高度为屏幕高度的一半,

目前还有些兼容问题后续有更好的解决办法会更新