在我的情况下，在导入下方添加AppModule会产生比默认值更好的用户体验。

IonicModule.forRoot(MyApp, {
            scrollPadding: false,
            scrollAssist: true, 
            autoFocusAssist: false
        }),

最终感谢上帝

1. 标签内的搜索栏将标签栏向上推。

如何在Android上进行测试？
我们很乐意始终为Android或台式机提供帮助。 :)

嘿@ mburger81 ，很好的问题！ 尚没有ionic-angular的每晚更新版本，但是当我们发布时，我将更新此问题，其中包含如何安装它以在android上进行测试的说明。

好的，我们正在一个登录页面上，我们在其中存在一些输入滚动问题。
所以我认为我们可以检查一下。

仅供参考，在我们可以对其进行测试并将其发布给测试人员之前，我们需要解决INVALID VIEWS错误（为里程碑感到高兴），因为这对我们来说是一个重大问题

被我耍到了！ 因此，在输入滚动问题上，您可以尝试将输入放置在视图中键盘打开时没有覆盖的区域吗？

这是一个好主意。 滚动时，请确保光标不会移到栏的后面

在滚动时，必须使光标没有阻塞离子头

来自我们团队成员之一@danbucholtz的一些iOS反馈：

在表单中通常不使用的单个控件（例如搜索输入）上，我们可以调查在“提交”或“输入”时关闭键盘吗？

执行导航操作时，如果键盘处于打开状态，则会自动关闭。 我们应该重新审视叠加层的这种行为。 例如，我无法想象打开模式并保持键盘打开时有很多用例。 ActionSheet，Alert，Loading，Modal，Popover，Picker和Toast都意味着新动作的开始（例如，抽空）或完成动作的反馈（提交或验证表单或其他内容）。 我认为在打开覆盖层的情况下关闭键盘很有意义。

chats.html

<ion-footer *ngIf="send.load_spinner==false" class="backgound_send_message">
<ion-toolbar>

<textarea *ngIf="Record.StartRecordGo==false" [(ngModel)]="you_comment" (keydown)="handleKeyDown($event)" (focus)="scrollTobottom()" placeholder="{{'chats.message' | translate }}"  id="my-textarea0" class="my-textarea" rows="1" autosize></textarea>

    <button ion-button clear large color="primary" *ngIf="send.you_comment.length>0" (click)="SendMessageServer(items)"><ion-icon class="SendMess" ios="ios-send-outline" md="md-send"></ion-icon></button>


</ion-toolbar>
</ion-footer>

chats.ts

SendMessageServer(items) {
    this.text_message_me.push(this.you_comment);
   document.getElementById('my-textarea0').focus(); // The keyboard remains open
}

此代码有效（OPEN KYEBOARD）

<ion-footer>
<ion-toolbar>
<textarea></textarea>
</ion-footer>
</ion-toolbar>

它可以很好地改变高度，但是最好在大小改变时制作动画

https://forum.ionicframework.com/t/no-documentation-for-scrollassist-autofocusassist-inputblurring-config-settings/88450?u=rohinmohandas

如果这些配置文件可以帮助处理这些与键盘和输入相关的问题，可能有用，如果它们可以在3.2.0公开之前可用。

与键盘隐藏输入的情况有关的解决方案吗？

app.component.ts中的以下代码在iOS和android中产生的页脚输入保持在键盘上方的预期效果。 由于某些原因，Android中的状态栏覆盖行为会影响键盘隐藏位于键盘高度以下的输入元素的方式。

import {Platform} from "ionic-angular";
import {Keyboard} from "@ionic-native/keyboard";
import {StatusBar} from "@ionic-native/status-bar";
import {SplashScreen} from "@ionic-native/splash-screen";

constructor(platform: Platform,public statusBar: StatusBar, public splashScreen: SplashScreen,
                public keyboard: Keyboard) {

        platform.ready().then(() => {
            if (platform.is("ios")) {
                statusBar.overlaysWebView(true);
                statusBar.styleBlackTranslucent();
            }
            splashScreen.hide();
            keyboard.hideKeyboardAccessoryBar(false); // use only on a need basis if accessory bar is needed.
            .
            .
            .

            }

在滚动时，必须使光标没有阻塞离子头

＃7047也有可能也会被修复吗？

实际上，这在浏览器中如何工作？ ionic是否添加了任何会破坏输入的额外功能，或者这仅仅是移动设备上输入字段具有挑战性的问题？

这是我的解决方案，效果很好。

1. 将hideKeyboardAccessoryBar为true

this.keyboard.hideKeyboardAccessoryBar(true)

1. 创建KeyboardAttachDirective.ts文件

import { Directive, ElementRef, Input } from '@angular/core';
import { Content, Platform } from 'ionic-angular';
import { Keyboard } from '@ionic-native/keyboard';
import { Subscription } from 'rxjs/rx';


/**
 * <strong i="15">@name</strong> KeyboardAttachDirective
 * <strong i="16">@description</strong>
 * The `keyboardAttach` directive will cause an element to float above the
 * keyboard when the keyboard shows. Currently only supports the `ion-footer` element.
 *
 * ### Notes
 * - This directive requires [Ionic Native](https://github.com/driftyco/ionic-native)
 * and the [Ionic Keyboard Plugin](https://github.com/driftyco/ionic-plugin-keyboard).
 * - Currently only tested to work on iOS.
 * - If there is an input in your footer, you will need to set
 *   `Keyboard.disableScroll(true)`.
 *
 * <strong i="17">@usage</strong>
 *
 * ```html
 * <ion-content #content>
 * </ion-content>
 *
 * <ion-footer [keyboardAttach]="content">
 *   <ion-toolbar>
 *     <ion-item>
 *       <ion-input></ion-input>
 *     </ion-item>
 *   </ion-toolbar>
 * </ion-footer>
 * ```
 */

@Directive({
    selector: '[keyboardAttach]'
})
export class KeyboardAttachDirective {
    @Input('keyboardAttach') content: Content;

    private onShowSubscription: Subscription;
    private onHideSubscription: Subscription;

    private attachTime = 0;

    constructor(
        private elementRef: ElementRef,
        private platform: Platform,
        private keyboard: Keyboard
    ) {
        if (this.platform.is('cordova') && this.platform.is('ios')) {
            this.onShowSubscription = this.keyboard.onKeyboardShow().subscribe(e => this.onShow(e));
            this.onHideSubscription = this.keyboard.onKeyboardHide().subscribe(() => this.onHide());
        }
    }

    ngOnDestroy() {
        if (this.onShowSubscription) {
            this.onShowSubscription.unsubscribe();
        }
        if (this.onHideSubscription) {
            this.onHideSubscription.unsubscribe();
        }
    }

    private onShow(e) {
        let keyboardHeight: number = e.keyboardHeight || (e.detail && e.detail.keyboardHeight);

        if(this.attachTime > 1){
            if(
            keyboardHeight == 313 ||
            keyboardHeight == 258 ||
            keyboardHeight == 216 ||
            keyboardHeight == 253 ||
            keyboardHeight == 226 ||
            keyboardHeight == 271 ||
            keyboardHeight == 216 ||
            keyboardHeight == 264){
                this.setElementPosition(0)
            }else{
                if(this.attachTime > 2){
                    this.setElementPosition(0)
                }else{
                    this.setElementPosition(keyboardHeight);
                }
            }
        }else{
            this.setElementPosition(keyboardHeight);
        }
        this.attachTime ++
    };

    private onHide() {
        this.setElementPosition(0);
        this.attachTime = 0
    };

    private setElementPosition(pixels: number) {
        this.elementRef.nativeElement.style.paddingBottom = pixels + 'px';
        this.content.getScrollElement().style.marginBottom = (pixels + 44) + 'px';
        this.content.scrollToBottom()
    }
}

1. 采用

<ion-header (touchstart)="closeKeyboard()"></ion-header>

...

<ion-content #content (touchstart)="closeKeyboard()"></ion-content>

...

<ion-footer [keyboardAttach]="content" class="messagebar">
    <ion-toolbar no-border>
        <div class="toolbar-inner">
            <div #inputer style="-webkit-user-select: auto;padding:5px;font-size:16px; min-height:1.5em; width:100%;border:1px solid #ccc;background-color:#fff;" contenteditable="plaintext-only" (keyup)="keyup($event)" (focus)="onFocus($event)" (blur)="onBlur($event)"></div>
            <button ion-button small (tap)="send()" [disabled]="!msgContent.length">发送</button>
        </div>
    </ion-toolbar>
</ion-footer>

1. 在XXXPage.ts添加一些方法

    onBlur(event) {
        if (this.keyboardOpen) {
            event.target.focus()
        }
    }

    keyup(event){
        this.msgContent = event.target.innerText
    }

    onFocus(event) {
        this.keyboardOpen = true
    }

    closeKeyboard() {
        this.keyboardOpen = false
        this.keyboard.close()
    }

perview.gif链接

Preview.mov链接

@ lh4111太好了！ 但是，您是否在android中测试过？ 看来行不通。

我们和@aspidvip有同样的问题
我可以问@ lh4111 ，您的解决方案是什么？ 它可以解决标题下的输入问题吗？

@kitkimwong我没有在android上测试，但我认为原理应该相似。

@ mburger81

1. 使用ion-native/keyboard提供的方法this.keyboard.hideKeyboardAccessoryBar(true)
   设置键盘盖Page
2. 当光标聚焦在输入上时，键盘将打开。 然后将ion-content padding-bottom设置为显示ion-footer

我的英语不是很好，希望你能听懂

无论如何，这里是否使用第一个线程中提到的WKWebView插件？ 还是所有关于UIWebView的评论？

@ jgw96我刚刚在iOS设备上测试了WKWebView。 为我大大改善。 看起来输入字段没有像您期望的那样很好地停留在键盘上方，并被延迟，它最终显示出来。 这是一个已知问题吗？

仅此iOS吗？ 我尚未在Android上进行测试，但是可以在其中运行吗？

记录：
https://1drv.ms/v/s!AqSDIyRRHLbYazFGbIPhOGLC4sA

科尔多瓦CLI：6.4.0
离子框架版本：3.0.1
Ionic CLI版本：2.1.14
Ionic App库版本：2.1.7
Ionic应用程序脚本版本：1.3.0
ios-deploy版本：1.9.1
ios-sim版本：5.0.12
操作系统：macOS Sierra
节点版本：v7.4.0
Xcode版本：Xcode 8.3.2 Build版本8E2002

嘿，我测试中的@manucorporat仅供参考。 请参阅上面的帖子和记录。 我们的应用程序本质上是一个聊天应用程序，因此非常高兴知道您是否认为此问题可以解决。

@ jgw96 @manucorporat能否请您评论一下此测试的状态，以及何时修复brnach会投入生产？ 还是剩下要做的？ 非常感谢。

@ jgw96您可能会更新此问题吗？ 似乎错过了3.3.0里程碑。

是否有针对键盘问题的官方修补程序？ 自从Ionic 1以来，使用它一直很痛苦，但至今还没有针对键盘等重要功能的官方修复程序。

@nuvoPoint LoL ，键盘问题已经持续了将近1.5年：

1. https://github.com/ionic-team/ionic/issues/6228
2. https://github.com/ionic-team/ionic/issues/5432

而且他们只是锁定问题。哈哈...
所以..我在一年前因为键盘问题放弃了离子产品，而现在，我回到这里看看键盘是否已固定，但是正如您所看到的，在这一年中它们没有任何进展。 :)

看来，即使这是简单应用程序输入框是与用户进行交互的基本组件，对于这个该死的问题，我们只能使用IONIC来构建一些简单的信息应用程序。 也许这就是离子的定位...？ 大声笑。 我不知道。

而且，如果您在论坛中看到讨论，则许多开发人员都会遇到相同的问题并回答：
无法使用Ionic构建像聊天应用程序这样的简单本机：

https://forum.ionicframework.com/t/about-to-give-up-with-ionic-3-simple-native-like-chat-page-not-possible/87548

伙计们，键盘正在开发中，如果您想测试它，则在wk的cordova插件中有一个分支。

cordova plugin add https://github.com/driftyco/cordova-plugin-wkwebview-engine.git#keyboard-fixes --save

这些是当前修复程序： https :

尝试安装它，看看它是否更好。 团队正在寻找反馈

编辑：

@AmitMY您希望我如何发布反馈？ 在这个线程？

在我的iOS设备上测试了WKWebView。 为我大大改善。

当前的问题：
看起来输入字段没有像您期望的那样很好地停留在键盘上方，并被延迟，它最终显示出来。 这是一个已知问题吗？

记录：
https://1drv.ms/v/s!AqSDIyRRHLbYazFGbIPhOGLC4sA

全局软件包：
@ ionic / cli-utils：1.2.0
科尔多瓦CLI：7.0.1
离子CLI：3.2.0

本地套餐：
@ ionic / app-scripts：1.3.7
@ ionic / cli-plugin-cordova：1.2.1
@ ionic / cli-plugin-ionic-angular：1.2.0
Cordova平台：iOS 4.4.0
离子框架：离子角3.0.1

系统：
节点：v7.4.0
操作系统：macOS Sierra
Xcode：Xcode 8.3.2 Build版本8E2002
ios部署：1.9.1
的ios-sim：5.0.12

@jrmcdona我认为您应该在此处发布反馈。 @manucorporat会在可能的时候查看它
尝试使它尽可能专业，例如-拥有视频很好，但也要说明视频中有什么错误（这样我们就可以跟踪问题，而不必每次都观看录像）

是否有希望解决选项卡和键盘打开问题？

@ Floyd1256在此处将

我的离子应用程序需要聊天功能。
我在项目中测试了cordova-plugin-wkwebview-engine.git＃keyboard-fixes，取得了很大的进步。
然而，与本地键盘管理相比，我们仍然无法做一些事情。
我的参考是手机上的消息传递功能，但是对于最大的知名聊天应用来说，它是相同的：
当我们单击以编写新消息时，键盘会出现并推入底部固定的输入文本和最后一条消息，而不是顶部固定的标题。
推送动画很流畅，即使键入新消息，我们也可以看到最后一条消息。
举个例子，只需用任何电话编写并发送短信即可。

我希望在android，ios和Windows设备上使用离子键盘具有相同的行为。
在当前的离子键盘上，推送动画比较生涩，键盘会推送底部的固定输入，但覆盖了最后一条消息（在所有设备上）。
为了进行测试，只需在离子页脚中添加文本输入并键入文本即可。
挑战是巨大的，但最终用户不能按原样接受键盘，与本地键盘的差距很明显。
否则，感谢出色的离子框架。

调整大小时留给创建动画，当键盘出现在选项卡上时，禁用调整大小的功能没有出现！ 或者可以在显示键盘时禁用选项卡的外观

最近消失滚动侧

通过在主webview上添加嵌套webview，我对这个问题有一个有趣的设计。 因此开发人员可以选择将UI分为两层，一层用于主要内容，第二层用于需要与键盘同步的任何UI。

@ Khalid-Nowaf在此设计中，随着键盘的抬起，主视图不会增加。 因此，在聊天场景或SMS中，您掩盖了所有消息。 例如，在iOS SMS中，消息会以非常流畅的方式与文本框一起向上推送-这样您就可以始终看到最后发送的消息。 然后，在输入文本后键盘不会掉落，直到您继续键入并离开键盘为止。 我个人认为离子设计应该模仿iOS和Android（尽管我无法使用Android说话，因为我从未使用过）。 从开发的角度来看，使它实现的复杂性我也不知道，但希望它能变得更近。 WKWebView对我来说有了很大的改进。

@jrmcdona现在是键盘的主要问题，它是如何使页脚平滑地通过键盘滚动。 当前的键盘插件和Web视图试图互相发送事件，因此它们可以管理动画和调整大小..etc，并且很难使它们彼此同步。 有时键盘比Webview动画快。 所以我想在这里解决的是在主视图之上引入第二个Webview。 并且本机键盘将其向上推，而主Web视图可以选择是否滚动“取决于开发人员的需求”，而现在我认为滚动主视图已经不是问题。 聊天应用之所以成为问题的根源，是因为每一层都是一层的。

论坛中的某个人说，有一个出色的插件可以完美地解决键盘问题。
https://github.com/EddyVerbruggen/cordova-plugin-native-keyboard
坏消息是该插件是付费的。

另外，仅测试ionic的“固定键盘分支”，仍然存在很大的问题和糟糕的用户体验。

@kitkimwong哇，看起来很不错，除了它非常昂贵之外（尤其是离子是免费的）。 @manucorporat你绝对应该看看

该插件在ionic文档中列出。 我今天将尝试一下，看看效果如何。 我猜对于一些公司来说200美元并不是那么贵。 开发人员需要两个小时的时间来支付这笔费用，我想您可能会花几个小时在没有插件的情况下弄乱键盘。
http://ionicframework.com/docs/native/native-keyboard/别误会我，宁愿不付款，但我可能会！

我已经创建了一个测试键盘的存储库，有了这个存储库，您可以测试

• 像聊天应用
• 形式和大量输入“形式离子E2E测试”
• ios的wkwebview **新
• RTL

这是我的一些演示

回购链接： https :

克隆仓库后您要做的一切
sh ionic cordova run ios --prod ionic cordova run android --prod

7047

将本机的实际输入字段作为键盘的选项包括在内是一种想法吗？ 这样我们就不必依赖DOM渲染的速度不够快了，而将输入固定在键盘上将更易于实现。

俗话说：“当您有锤子时，一切看起来都像钉子”。 所以也许我们需要以不同的方式对待整个事情。

@larssn就是付费键盘插件的作用。 因此，这似乎是一个不错的选择。

@jrmcdona可能会好的。 虽然宁愿有一个内部解决方案可以100％工作。 在过去，我变得依赖于几个已久久不修的插件，而对其进行维护则是一场噩梦。

@larssn并不建议使用该插件。 暗示您建议使用ionic进行该设计听起来不错，这也是插件的作用。

在我们从离子团队获得有关当前键盘问题的反馈之前，-如果有人想测试付费插件，我在这里创建了一个仓库。 但是，由于某种原因，我无法使键盘最初显示。 我必须单击右上角的切换才能显示它。 无法弄清楚为什么页面加载后不会显示在页面上。 像演示。

https://github.com/jrmcdona/keyboard-test

一个对我有用的解决方案：

• 使用input代替ion-input

@SoldierCorp您的意思是在WkWebView测试分支中提供了ionic吗？ 还是UIWebView？

@jrmcdona在组件的模板中，html元素本身。

考虑到有关此主题的所有评论和期望，为什么不考虑提供
一个专用的聊天组件，包括键盘和输入文本？ 由普通开发人员创建一个插件太困难了，即使看起来确实很棒，使用第三方插件也会令人沮丧

同意那100％。 如果由于他们所面临的某些复杂性而无法实现，那对我们所有人来说也将真正有帮助。

@AmitMY @manucorporat关于WKWebView测试分支。 相信在按“发送”后键盘应该不会关闭。
就像您在iOS中的SMS对话中看到的一样。 如果开发人员不希望这种行为，则可以调用键盘关闭方法，但默认情况下，该方法应保持打开状态，以便人们在聊天过程中可以嘎嘎作响，而键盘不会上下弹跳。

该分支机构的状态如何？ 是否可以显示有关键盘的最新消息？ @AmitMY @manucorporat @ jgw96

@jrmcdona它已合并在master中。可以尝试一下：
[email protected]

好！👍🏼

@manucorporat我是否只需npm install [email protected]来获得该版本？
我尝试过，但这是无效的。 除了要让我测试的构建外，不确定如何获取该文件。

@jrmcdona运行npm v ionic-angular versions --json以查看发布了哪些版本

@jrmcdona

npm install ionic-angular<strong i="7">@nightly</strong>

好的，谢谢@manucorporat 。 我删除了WKWebView测试分支，并将其添加回最新版本。
<plugin name="cordova-plugin-wkwebview-engine" spec="^1.1.3" />

然后，我将Angular更新为4.1.3，这样我就可以每晚进行安装。

似乎还没有准备好黄金时间。 WKWebView测试分支的表现比现在更好。 使用此版本，输入框根本不会上升。 仅键盘无输入。 在测试分支中，键盘会上升，但会稍有延迟。 不理想，但可以使用。

有人能正常使用键盘吗？

这是一个已知问题吗？有一个已知问题列表吗？
我应该记录新问题吗？

这是一个视频。
https://1drv.ms/v/s!AnyXOztVClZYbfswP -UEtaHEU0I

这是代码：

<div class="chat-window-container" style="padding-top:20px">
  <div class="chat-window">
    <div class="message-list">

      <chat-message *ngFor="let message of messages | async" [message]="message">
      </chat-message>

    </div>

    <message-input>

      <div style="flex:1;padding-left:5px;">
        <ion-input [(ngModel)]="draftMessage.text" (keydown.enter)="onEnter($event)" autofocus="" placeholder="Type to chat..." maxlength="2000"></ion-input>
      </div>
      <div (click)="onEnter($event)" style="display:table;width:50px;height:100%">
        <ion-icon name="send" color="primary" class="message-send-icon"></ion-icon>
      </div>
    </message-input>
  </div>
</div>

谢谢大家

@jrmcdona是的，仍然没有发布，我们正在准备一个新的键盘插件：

1. 更新CLI：
   ```
   npm install -g ionic

2. Make sure you are using ionic-framework nightly or 3.4

3. Make sure you are using the latest WK plugin

4. Remove ionic-keyboard-plugin: **SUPER IMPORTANT STEP!!!!**

5. Install the new keyboard plugin: 
 ```
ionic cordova plugin add https://github.com/ionic-team/cordova-plugin-keyboard --save

高兴！ 让我知道它如何为您服务

@manucorporat
版本3.4尚未发布。

Nightly和其他最近发布的版本对我来说都无效。 看截图

@jrmcdona您是否尝试过删除node_module并再次运行npm install？ 确保使用--save在ionic-angular @ nightly中。

但是，今天将发布3.4。

@manucorporat UI在这里看起来不错！ 输入框位于键盘顶部。 也许输入和键盘的分离非常温和，所以您可以稍微说出它们不是一个不错的单元。 但是面目全非！

我不确定如何将Keyboard导入应用程序以使用Show / Hide方法。
（即从“ @ ionic-native / keyboard”导入{键盘}；）

看起来如果您单击“发送”按钮，键盘会自动关闭（由于没有将键盘导入应用程序中以使用Keyboard.Show等方法，因此我没有在代码中关闭它）是否可以保留键盘打开方式像iOS SMS一样？

这是录音。
https://1drv.ms/v/s!AnyXOztVClZYcY3vYXiXYaAZNdE

想知道您是否曾经在键盘插件本身中包含输入内容，并根据设备类型设置了样式？

Manu，做得好！

@manucorporat确实有很大的改进，您是否可以添加一个选项来推送内容（标题除外），以便我们可以在键盘打开且输入文本固定在底部时看到最后一条消息？

我需要安装哪些插件才能使键盘正常工作？

@aspidvip Manu在几篇文章中提到了它。 我会在这里复制。

更新CLI：
npm install -g ionic
确保每晚使用离子框架或3.4

确保您使用的是最新的WK插件

删除ionic-keyboard-plugin：超级重要的步骤！！！

安装新的键盘插件：

ionic cordova插件添加https://github.com/ionic-team/cordova-plugin-keyboard --save

https://github.com/driftyco/cordova-plugin-wkwebview-engine.git#keyboard -fixes

要么

https://github.com/driftyco/cordova-plugin-wkwebview-engine.git

??????

以及如何访问新的插件键盘？

如果将键盘作为子级添加到div中，则很好： 〜

aspidvip 于 2017-06-18