移动端软盘遮盖输入框的解决方案

手机端在向页面输入内容时，我们希望点击输入框聚焦后页面能自动定位，将输入框移至可见区域内。

如上图所示，如果点击输入框，这时候手机会调起软盘，那么软盘会盖住输入框，这样用户体验不好。
避坑指南

• 当点击输入框时调起软盘，安卓和IOS会有所不同，IOS中弹起软盘会让整体布局往上移，而安卓不会而是整体布局高度缩减了。如果要监听键盘弹起或者收起，IOS会失效。

const originalHeight = document.documentElement.clientHeight || document.body.clientHeight;
window.addEventListener('resize', () => {
  const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
  if (resizeHeight >= originalHeight) {
       //键盘收起
  }else {
      //键盘弹起
  }
});

• 使用scrollIntoView方法时需要注意，当软盘弹起页面底部的高度如果过小scrollIntoView方法滚动页面距离有限可能还是无法移至可视区，因此需要在输入框focus后在底部增加一段高度，然后让某个元素scrollIntoView到顶部，注意此时需要使用setTimeout延迟一段时间再scrollIntoView，因为需要等底部高度设置完毕。

 <textarea
   className={classNames('textarea-card-area', className)}
   placeholder={placeholder}
   value={value}
   onFocus={e => {
     onFocusChange?.(true, e.target);
     setTimeout(() => {
       if (e.target) {
         e.target.scrollIntoView();
       }
     }, 200);
   }}
   onBlur={() => {
     onFocusChange?.(false);
   }}
   
 />

• 如果你的页面顶部有吸顶的header，这个header会挡住你的输入框，当focus后，元素执行了scrollIntoView()，页面滑动到顶部，输入框会被header挡住。
  可以使用一个div放在textarea或者input之前。

 <div className={classNames('textarea-card')}>
  {/* 该 div 的作用是保证键盘弹起 textarea 居中 */}
  <div className="place-flag" ref={placeFlagRef}></div>
  <textarea
    className={classNames('textarea-card-area', className)}
    placeholder={placeholder}
    value={value}
    onFocus={e => {
      onFocusChange?.(true, e.target);
      setTimeout(() => {
        if (placeFlagRef.current) {
          placeFlagRef.current.scrollIntoView();
        }
      }, 200);
    }}
    onBlur={() => {
      onFocusChange?.(false);
    }}
    onChange={e => {
      // onchange事件
    }}
    maxLength={maxlength}
  />
 // 其他代码
</div>

此时让上面的divscrollIntoView到顶部，这个div通过position：absolute 设置-50px，这个距离可以设置为header的高度，那么刚好就让输入框移至到可视区，并且没有被header挡住。

标签：header,scrollIntoView,输入框,弹起,软盘,遮盖,页面
来源： https://blog.csdn.net/weixin_43213137/article/details/122174670