Ionic模态框随键盘弹出上移问题：如何固定模态框及输入组件位置

嘿，针对你遇到的「模态框弹出后，点击输入框唤起键盘时，模态框被推到顶部」的问题，我整理了几个实用的解决方案，结合你的代码来调整：

1. 先禁用Ionic的键盘自动布局调整 #

Ionic默认会在键盘弹出时自动调整页面滚动和元素位置，这是导致模态框移位的核心原因之一。我们可以通过两种方式关闭这个行为：

方式一：在模态框组件内临时禁用 #

如果你用了@ionic-native/keyboard插件，在模态框的.ts文件里添加以下代码：

import { Keyboard } from '@ionic-native/keyboard/ngx';

constructor(private keyboard: Keyboard) {}

// 模态框进入时禁用键盘滚动调整
ionViewDidEnter() {
  this.keyboard.disableScroll(true);
}

// 模态框关闭时恢复，避免影响其他页面
ionViewWillLeave() {
  this.keyboard.disableScroll(false);
}

方式二：全局配置禁用输入辅助 #

在app.module.ts的Ionic全局配置里，直接关闭相关的输入辅助功能：

import { IonicModule } from '@ionic/angular';

@NgModule({
  imports: [
    IonicModule.forRoot({
      scrollAssist: false,    // 关闭滚动辅助
      autoFocusAssist: false, // 关闭自动聚焦辅助
      inputScrollView: false  // 禁止输入框滚动视图调整
    })
  ]
})

2. 给模态框设置强固定定位 #

你的模态框当前的CSS已经有了基础定位，但可以进一步强化，确保它不受任何布局变化影响：

更新modal.css的.card类：

.card {
  position: fixed !important; /* 强制固定定位，脱离文档流 */
  max-width: 90%;
  max-height: 55%;
  top: 10%;
  left: 5%;
  right: 5%;
  bottom: auto; /* 取消bottom设置，避免和top冲突 */
  background-color: red;
  overflow: hidden !important;
  transform: none !important; /* 阻止Ionic自动添加的位移变换 */
}

同时在模态框的ion-content标签里，直接关闭滚动辅助属性：

<ion-content class="card" overflow-scroll="false" padding 
             scrollAssist="false" inputScrollView="false">
  <!-- 你的模态框内容：navbar、add组件、按钮 -->
</ion-content>

3. 优化输入组件的容器布局 #

确保输入组件的容器不会因为键盘弹出而挤压移位，给add-content添加固定高度和居中布局：

更新component.css：

.add-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

add .code {
  display: inline-block;
  width: 100%;
  max-width: 37%;
}

add button {
  margin: 5%
}

add input {
  letter-spacing: 4.8px;
  text-align:center
}

额外补充：Cordova环境下的配置 #

如果你是用Cordova打包，还可以在config.xml里添加以下配置，彻底阻止键盘调整WebView：

<preference name="KeyboardResize" value="none" />
<preference name="KeyboardResizeMode" value="native" />

把这些步骤结合起来，你的模态框就能在键盘弹出时稳稳保持在原来的位置啦！

内容的提问来源于stack exchange，提问作者EyTa