我有一个必须处于横向模式的离子应用。当用户点击输入字段进行键入时,键盘会出现,因此用户只能看到页眉,页脚和键盘,因此用户无法看到他正在键入的内容。当我做同样的事情时,我在本机应用程序上看到,键盘出现了一个单独的文本框,这对我的Ionic应用程序来说非常完美。我怎么能在离子中做到这一点?以下是一些截图:
答案 0 :(得分:0)
尝试对IonicModule使用scrollAssist:true。
IonicModule.forRoot(MyApp, {
scrollAssist: true
}),
答案 1 :(得分:0)
我得到了它的工作。看起来解决此问题的唯一方法是在键盘显示时隐藏header
和footer
,并在键盘隐藏时显示header
和footer
。我还必须删除一些margins
,以便专注的input
位于顶部。这是我在app.component.ts
中添加的代码:
keyboard.onKeyboardShow().subscribe(() => {
let headers = document.querySelectorAll("ion-header"); //Get all headers
headers[headers.length - 1].setAttribute("style", "display: none"); //Hide ACTIVE header
let footers = document.querySelectorAll("ion-footer"); //Get all footers
footers[footers.length - 1].setAttribute("style", "display: none"); //Hide ACTIVE footer
let contents = document.querySelectorAll("ion-content"); //Get all content
contents[contents.length - 1].querySelector("div.scroll-content").removeAttribute("style"); // Remove styling from content (margins)
});
keyboard.onKeyboardHide().subscribe(() => {
let headers = document.querySelectorAll("ion-header"); //Get all headers
headers[headers.length - 1].removeAttribute("style"); //Show ACTIVE header again
let footers = document.querySelectorAll("ion-footer"); //Get all footers
footers[footers.length - 1].removeAttribute("style"); //Show ACTIVE footer
let contents = document.querySelectorAll("ion-content"); //Get all content
contents[contents.length - 1].querySelector("div.scroll-content").setAttribute("style", "margin-top: 56px; margin-bottom: 56px;"); //Set styling again (margins)
});