当键盘出现在离子+电容器应用程序中时，如何让输入顺利地重新定位

Question

我正在开发一个包含聊天功能的 Ionic 应用程序。很早就，我遇到了一些让我质疑我所选择的技术的事情。

与大多数聊天应用程序一样，我在页面底部有一个文本输入框，供用户输入消息。当键盘出现时，该输入必须向上移动以显示在键盘上方。然而，它的做法很糟糕：键盘出现后，输入向上传送。它应该与键盘一起向上移动，并与键盘一起隐藏。

这是一个简短的视频，显示了我的 Ionic 应用程序上的卡顿行为：https://www.youtube.com/shorts/bE3J7QCPLBM

这是我希望看到的行为示例：https://youtube.com/shorts/-o2ciVl0LYU?feature=share

这让应用程序感觉极其廉价，而且这是这个应用程序中非常重要的交互。

我在

IonTextarea

内使用

IonFooter

，在

IonPage

内使用。此行为发生在真实设备和模拟器中。

我尝试通过

resize

调整

@capacitor/keyboard

配置选项，但所有选项都没有改变任何内容。

我一直在研究一些用 Ionic 制作的生产应用程序，但没有一个是如何在屏幕下部进行输入的。有趣的是，在 Safari 中测试这段代码，浏览器确实可以顺利地处理这种交互。

我的代码，我认为这是实现此目的的天真、预期的方法：

const Page: React.FC = () => {
  /* ... */

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          {/* ... */}
        </IonToolbar>
      </IonHeader>

      <IonContent fullscreen>
        <NotesList notes={notes} />
      </IonContent>


      <IonFooter className='border-t border-t-gray-500 py-2 px-3' translucent>
        <IonTextarea
          className='p-1 border border-gray-700 rounded bg-white'
         />
      </IonFooter>
    </IonPage>
  );
};

编辑：我看到的唯一可能的解决方案是监视使用keyboardWillShow事件出现的键盘，该事件为您提供键盘高度，并绝对定位输入，使其通过CSS过渡与键盘一起移动。我不知道键盘的移动速度是多少，每个操作系统的速度都不同。

我希望这种东西是一个轮子，我不必使用 Ionic 重新发明，所以我希望有更好的解决方案。

Answer 1

我在使用 Ionic 7 时也遇到了同样的问题。考虑使用 ionKeyboardDidShow 和眼球追踪来实现自定义 CSS 路线，但希望有更好的方法。

window.addEventListener('ionKeyboardDidShow', ev => {
  const { keyboardHeight } = ev;
  // Do something with the keyboard height such as translating an input above the keyboard.
});

window.addEventListener('ionKeyboardDidHide', () => {
  // Move input back to original location
});