Когда разрабатываете чат или мессенджер с помощью Ionic Framework, вы можете столкнутся с неприятным поведением клавиатуры Android, когда в ion-textarea вводите текст, а потом нажимаете кнопку отправить. Поле ввода при этом теряет фокус и стандартным поведением клавиатуры будет ее исчезновение.

Это довольно таки не удобно для пользователей приложение. Им приходится для отправки следующего сообщения снова нажимать на поле ввода.

В чем причина?

Приложение на Ionic Framework – это гибридное HTML-приложение. На смартфоне приложение выполняется с помощью оболочки
UIWebView для iOS и WebView для Android. Пользователь работает как бы в браузере, когда открывает приложение.

Чтобы исправить эту неприятность с исчезновением клавиатуры нам нужно отменить действие браузера по-умолчанию, когда поле ввода теряет фокус.

Для этого необходимо использовать event.preventDefault(). Но сначала запустим наше тестовое приложение:

Установка Ionic Framework, если не установлено ранее:

npm install -g ionic

Создание тестового приложения:

ionic start test blank

Открываем нашу HomePage страницу:

Редактируем код, чтобы у нас в footer появилось текстовое поле с кнопкой отправить.

<ion-header>
	<ion-toolbar>
		<ion-title>
			Ionic Blank
		</ion-title>
	</ion-toolbar>
</ion-header>
<ion-content padding>
	<p>Как запретить прятать клавиатуру после отправки сообщения в Ionic 4</p>
</ion-content>
<ion-footer>
	<ion-toolbar>

		<ion-textarea placeholder="Повідомлення" [(ngModel)]="editorMsg">
		</ion-textarea>
		<ion-buttons slot="end">
			<ion-button color="primary" (click)="sendMessage()" (mousedown)="$event.preventDefault()">
			      <ion-icon slot="icon-only" name="send"></ion-icon>
			</ion-button>
		</ion-buttons>
	</ion-toolbar>
</ion-footer>

Открываем файл app/home/home.page.ts и вставляем код с функцией sendMessage():

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})



export class HomePage {
	editorMsg: string = '';

	sendMessage() {

	}
}

Запускаем наше приложение на Android:

ionic cordova run android

И теперь, как во всех нормальных мессенджерах, мы можем писать несколько сообщений подряд и клавиатура не будет закрываться при нажатии кнопки отправить:

Добавить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Отправить