横屏时输入框的被键盘遮住有好的解决方案吗？

Question

横屏时输入框的被键盘遮住，能实现当前输入框聚焦，当前输入框没被遮挡吗?

Answer 1

在横屏模式下，输入框被键盘遮挡是一个常见的问题，尤其是在移动设备上。为了确保当前输入框在聚焦时不会被键盘遮挡，可以使用以下几种方法来解决这个问题：

方法一：使用 CSS 和 JavaScript 动态调整页面布局

通过监听输入框的聚焦和失焦事件，动态调整页面布局，确保输入框始终在可见区域内。

import React, { useEffect, useRef } from 'react';

const AdjustInputField = () => {
  const inputRef = useRef(null);

  useEffect(() => {
    const handleFocus = () => {
      const inputElement = inputRef.current;
      const rect = inputElement.getBoundingClientRect();
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      window.scrollTo({
        top: rect.top + scrollTop - 20, // 调整 20 为你希望的偏移量
        behavior: 'smooth'
      });
    };

    const inputElement = inputRef.current;
    inputElement.addEventListener('focus', handleFocus);

    return () => {
      inputElement.removeEventListener('focus', handleFocus);
    };
  }, []);

  return (
    <div style={{ padding: '50px' }}>
      <input ref={inputRef} type="text" style={{ width: '100%' }} placeholder="Input something..." />
    </div>
  );
};

export default AdjustInputField;

方法二：使用第三方库

一些第三方库已经为你处理了这种情况，特别是在移动设备上。一个常见的库是 react-native-keyboard-aware-scroll-view，但这通常用于 React Native 项目。在 web 项目中，可以使用类似的策略。

方法三：使用视口单位（Viewport Units）

使用视口单位来设置输入框的高度和位置，确保其始终在可见区域内。这种方法适合简单的布局调整。

/* CSS */
input {
  position: fixed;
  bottom: 10vh; /* 距离视口底部 10% */
  width: 80vw; /* 宽度为视口宽度的 80% */
  left: 10vw; /* 距离视口左边 10% */
}

方法四：使用 scrollIntoView

使用 scrollIntoView 方法确保输入框在视口内。

import React, { useRef } from 'react';

const ScrollIntoViewInput = () => {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
  };

  return (
    <div style={{ padding: '50px' }}>
      <input
        ref={inputRef}
        type="text"
        style={{ width: '100%' }}
        placeholder="Input something..."
        onFocus={handleFocus}
      />
    </div>
  );
};

export default ScrollIntoViewInput;