Ionic v3 - скрыть клавиатуру при прокрутке списка или содержимого

Question

Я использую ионный каркас 3 (v 3.9.2). Я использую панель поиска в верхней части экрана и отображаю результаты в списке ниже в содержании. Довольно стандартный. Однако клавиатура отображается до тех пор, пока я не закрою ее явно (используя this.keyboard.hide () в моем коде) в результате действий пользователя (например, пользователь нажимает кнопку отмены или нажимает кнопку поиска на клавиатуре). Я использую Keyboard Plugin от Ionic.

В идеале я хочу скрыть клавиатуру, когда пользователь начинает прокручивать результаты поиска, особенно когда результаты начинают отображаться по мере их ввода в поле ввода поиска. Поведение одинаково на Android и iOS - реальные устройства

Вот что я пробовал: 1. На ионном контенте я отслеживаю событие запуска прокрутки и затем вызываю функцию скрытия клавиатуры. Но это облупленное. Клавиатура всплывает дважды, иногда не закрывается все время. 2. Я мог бы отключить «отображение результатов при наборе текста» и заставить пользователя явно щелкнуть поиск или отменить, при этом я скрываю клавиатуру, которая работает нормально, но это не тот опыт пользователя, который мне нужен. 3. Я пытался увидеть, могу ли я скрыть клавиатуру, когда происходит размытие (ionBlur), как только я начинаю прокручивать, но размытие никогда не срабатывает

Есть предложения?

Answer 1

столкнулся с этим вопросом сам. Если бы панель поиска сочеталась с компонентом виртуальной прокрутки. Как вы уже упоминали, каждый раз, когда список изменялся в зависимости от ввода с панели поиска, вызывалось событие прокрутки, затрудняющее скрытие клавиатуры при событии прокрутки. После долгих проб и ошибок я заставил это работать. По какой-то причине мое событие прокрутки, вызванное виртуальной прокруткой, было нулевым, поэтому простая проверка, чтобы не закрывать клавиатуру, если она была нулевой, устранила проблему для меня.

Ваш HTML:

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

и ваши .ts:

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

Answer 2

Таким образом, моя теория заключается в том, что подход "на ионном контенте, я отслеживаю событие запуска прокрутки и затем вызываю функцию скрытия клавиатуры" все еще может быть действительным.

Проблема с событиями onScroll заключается в том, что они запускаются в быстрой последовательности, и это может вызвать проблемы и ошибки.

Попробуйте реализовать простую стратегию "debounce":

// иметь эту переменную в вашем файле TS:

private scrollTriggered: boolean;

// обновить метод onScroll:

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

// теперь где-то в вашем входном коде поиска (например, ionInput) вам нужно сбросить флаг на false:

this.scrollTriggered = false;

Идея состоит в том, чтобы гарантировать, что клавиатура.hide () вызывается только один раз при срабатывании события однократной прокрутки.

Пожалуйста, дайте мне знать, если это работает для вас.