Question

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

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

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

有什么建议吗？

Answer 1

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

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

尝试实施简单的“反跳”策略：

//在您的ts文件中包含此var：

private scrollTriggered: boolean;

//更新您的onScroll方法：

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

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

this.scrollTriggered = false;

想法是确保键盘。一次滚动事件被触发时，hide（）仅被调用一次。

请告诉我这是否适合您。

Answer 2

我自己也遇到了这个问题。有一个与虚拟滚动组件结合的搜索栏。如您所提到的，列表每次基于搜索栏输入而更改时，都会触发滚动事件，从而很难在滚动事件中隐藏键盘。经过大量的试验和错误，我使它起作用。无论出于什么原因，我的虚拟滚动触发的滚动事件为null，因此简单检查一下是否为null不会关闭键盘，这为我解决了这个问题。

您的HTML：

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

和您的.ts：

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

Answer 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();
}

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

Ionic V3-滚动列表或内容时隐藏键盘

3 个答案: