Ionic v3 - 滚动列表或内容时隐藏键盘答案

【问题标题】：Ionic v3 - hide keyboard when scrolling list or contentIonic v3 - 滚动列表或内容时隐藏键盘
【发布时间】：2019-06-01 10:59:08
【问题描述】：

我正在使用离子框架 3（v 3.9.2）。我使用顶部导航中的搜索栏，并在内容下方的列表中显示结果。很标准。但是，由于用户操作（例如，用户单击取消或单击键盘上的搜索按钮），键盘会显示直到我明确关闭它（在我的代码中使用 this.keyboard.hide() ）。我使用 Ionic 的键盘插件。

理想情况下，我希望在用户开始滚动搜索结果时也隐藏键盘，尤其是当他们在搜索输入框中键入时开始显示结果时。 Android 和 iOS 上的行为相同 - 实际设备

这是我尝试过的： 1.在ion-content上，我监听一个滚动开始事件，然后调用键盘隐藏函数。但它是片状的。键盘有时会弹出两次，一直没有关闭。 2.我可以关闭“键入时显示结果”并强制用户显式单击搜索或取消我隐藏工作正常的键盘，但这不是我想要的用户体验。 3. 当我开始滚动时触发模糊事件（ionBlur）时，我尝试查看是否可以隐藏键盘，但从未触发模糊

有什么建议吗？

【问题讨论】：

this：“在离子内容上，我监视滚动开始事件，然后调用键盘隐藏功能”方法是有效的。您能否分享您的代码并提供有关意外行为的更多详细信息 - 这可以修复。
感谢谢尔盖的回复。这就是我所做的。在 HTML 中，我这样做了：…………。并在 TS 文件中： onScroll(event:Event) { console.log('Scroll start fire'); this.keyboard.hide(); }
当我在 Android 中测试时，滚动启动事件触发良好，键盘有时隐藏有时不隐藏。有时它会隐藏并再次出现，我必须再次滚动才能隐藏它。不幸的是，它是不可预测的，并且无法始终如一地重现它。谢谢
我明白了，让我建议如何在几个小时内解决它

标签： ionic-framework keyboard ionic3 hide

【解决方案1】：

所以我的理论是“在离子内容上，我监视滚动开始事件然后调用键盘隐藏功能”的方法仍然有效。

onScroll 事件的问题在于它们会快速连续触发，这可能会导致问题和不稳定。

尝试实施简单的“去抖动”策略：

// 在你的 ts 文件中有这个变量：

private scrollTriggered: boolean;

// 更新你的 onScroll 方法：

onScroll(event:Event) {
    if (!scrollTriggered) {
        this.keyboard.hide();
        this.scrollTriggered = true;
    }; 
}

// 现在在您的搜索输入代码中的某处（如 ionInput），您需要将标志重置为 false：

this.scrollTriggered = false;

想法是确保在触发滚动事件时只调用一次keyboard.hide()。

如果这对你有用，请告诉我。

【讨论】：

感谢您的想法...我会尝试并让您知道。我需要一些时间来测试多个场景
是的，我认为我的提议类似于此处的节流：developer.mozilla.org/en-US/docs/Web/Events/…，但 scrollTriggered 变量的“重置”位于 onScroll 方法之外。您的特定 UX 应该提示我认为最好的触发器重置位置
测试过了。好一点 - 但仍然片状。出于某种原因，滚动事件有时会在我的结果列表刷新时自动触发，然后关闭键盘，而理想情况下它不应该这样做。场景是这样的：搜索、滚动、键盘隐藏，然后向下滚动以找到特定结果，然后在搜索栏中输入更多文本，再次滚动，键盘有时隐藏，然后有时重新出现
我看很有趣。我也会考虑一下。
测试了其他场景。大多数看起来不错，但仍然有点片状。当我向上滚动时，我看到一次，键盘弹出。顺便说一句，我在搜索结果中使用无限滚动。不确定这是否会导致这种行为或与滚动解决方案冲突？无论如何，我真的很感谢你的帮助谢尔盖！！

【解决方案2】：

我自己遇到了这个问题。有一个搜索栏与一个虚拟滚动组件相结合。正如您所提到的，每次根据搜索栏输入更改列表时，都会触发一个滚动事件，因此很难在滚动事件上隐藏键盘。经过大量的试验和错误，我得到了这个工作。无论出于何种原因，我的由虚拟滚动触发的滚动事件为空，所以一个简单的检查如果它为空则不关闭键盘为我解决了这个问题。

您的 HTML：

<ion-content (ionScrollStart)="onScrollStart($event)">

还有你的 .ts：

    onScrollStart(event: any) {
    if (event === null) {
        return;
    }
    this.closeKeyboard();
}

【讨论】：

【解决方案3】：

我找到的解决方案是使用Keyboard 插件

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

添加到组件的提供者

@Component({
    selector: 'app-home',
    templateUrl: './home.page.html',
    styleUrls: ['./home.page.scss'],
    providers: [Keyboard] // <-- This line
})

添加到构造函数

constructor(private keyboard: Keyboard) {}

确保您的 ion-content 正在跟踪滚动事件：

<ion-content [scrollEvents]="true" (ionScroll)="onScroll($event)">

现在只需让方法关闭键盘：

onScroll($event) {
    this.keyboard.hide();
}

这可能不是最理想的，但我没有看到任何更好的解决方案。

【讨论】：