Question

我正在开发基于IONIC 3的应用，但遇到了问题。当我单击离子搜索并以ANDROID形式打开键盘时，它会破坏布局并挤压内容，从而推动了应用程序的全部内容。

我正在使用 config.xml

<preference name="Fullscreen" value="true" />

app.component.ts

this.statusBar.hide();


this.statusBar.overlaysWebView(false)

它的工作！但是，当我进入全屏模式时，它隐藏了我的底部。

请帮助我。

Answer 1

使用 disableScroll 方法将输入聚焦后，您可以防止UIScrollView向上移动。

https://ionicframework.com/docs/native/keyboard/

Answer 2

尝试在activity文件的Manifest 标记中添加此行 android:windowSoftInputMode="adjustPan

<activity
   ...
   android:windowSoftInputMode="adjustPan"> 
</activity>

Answer 3

尝试在app.scss文件中添加此CSS。我也有同样的问题，我想出了这个答案，而这个答案解决了我。希望这对您有所帮助。

.scroll-content{
  padding-bottom: 0px !important;
  margin-top: 0px;
}

Answer 4

安装Ionic Native Keyboard插件并尝试以下代码

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

  this.keyboard.onKeyboardShow().subscribe((res) => {
    this.tabBarElement = document.querySelector('.tabbar');
    if (this.tabBarElement != null ) {
      this.tabBarElement.style.display = 'none';
    }
});

this.keyboard.onKeyboardHide().subscribe((res) => {
  if (this.tabBarElement != null) {
    this.tabBarElement.style.display = '-webkit-box';
  }
});

希望您可以帮上忙！祝您编码愉快！

Answer 5

尝试以下代码：

window.addEventListener('keyboardDidShow', () => {
  console.log("Keyboard is open")
  let elements = document.querySelectorAll(".tabbar");

  if (elements != null) {
    Object.keys(elements).map((key) => {
      elements[key].style.display = 'none';
    });
  }
});

window.addEventListener('keyboardWillHide', () => {
  let elements = document.querySelectorAll(".tabbar");

  if (elements != null) {
    Object.keys(elements).map((key) => {
      elements[key].style.display = 'flex';
    });
  }
});

在遇到此问题的appcomponent.ts或特定选项卡中添加此代码。

键盘在Ionic Android中推动标签

5 个答案: