随笔

小米全面屏手机浏览器的input、textarea吸底被遮挡
小米5s安全键盘盖住输入框的问题
H5键盘兼容方案
小米手机 访问H5端 在 input密码输入哪里 不能输入密码

import { useEffect, useState } from 'react';
interface FixKeyboardProps {
  container: string;
  inputContent?: string;
}
let delayFocusTimer: any;
const useFixKeyboard = ({ container /*, inputContent*/ }: FixKeyboardProps) => {
  const [isFocus, setFocus] = useState<boolean>(false);
  useEffect(() => {
    try {
      const containerEle = document.querySelector<HTMLElement>(container)!;
      const containerStyle = window.getComputedStyle(containerEle);
      const paddingBottom = parseFloat(containerStyle.getPropertyValue?.('padding-bottom')) || 0;
      if (isFocus) {
        containerEle.style.paddingBottom = 226 + paddingBottom + 'px';
        document.activeElement?.scrollIntoView?.();
        // 无法触发resize事件
      } else if (paddingBottom >= 226) {
        containerEle.style.paddingBottom =
          (paddingBottom >= 226 ? paddingBottom - 226 : paddingBottom) + 'px';
      }
    } catch (err) {
      console.log(err);
    }
  }, [isFocus]);
  // 切换输入框优化
  const setDelayFocus = (v: boolean) => {
    if (delayFocusTimer) {
      clearTimeout(delayFocusTimer);
    }
    delayFocusTimer = setTimeout(() => setFocus(v));
  };
  return { setFocus: setDelayFocus };
};

export default useFixKeyboard;