6

I am using Ionic3, and have:

        <ion-textarea (change)="reviewChange()"></ion-textarea>

When a user changes the input, and blurs focus from the text area, the reviewChange() function is triggered as expected.

Question

Is it possible to add an equivalent of the ion-searchbar's ionInput event? i.e. when a user types text, an event is triggered for each key pressed.

Background

I am trying to track how many characters a user has left. e.g.

500 characters left

In order to do so, I need to track each key stroke. Unless there's a better way, or some automated way to do this?

sebaferreras
  • 44,206
  • 11
  • 116
  • 134
Richard
  • 8,193
  • 28
  • 107
  • 228

2 Answers2

12

An easier way would be to bind the text area to a property from the component

<ion-textarea maxlength="500" [(ngModel)]="myText"></ion-textarea>

And below that text area you can show the characters left like this

<span>{{ 500 - myText.length }} characters left</span>
sebaferreras
  • 44,206
  • 11
  • 116
  • 134
  • maxlength attribute dosen't restrict the number of characters to given value, i.e. 500. @sebaferreras – Khushboo Mulani Jun 29 '18 at 07:04
  • It should @KhushbooMulani. Could you please create a **[stackblitz demo](https://stackblitz.com/)** with your code? – sebaferreras Jun 29 '18 at 07:28
  • It restricts when I submit my form (It actually submits just 500 chars removing the rest of the chars) but it does not block the user from typing in the texarea even when max limit reaches. – Khushboo Mulani Jun 29 '18 at 08:42
  • It should not work like that... Please create a demo so I can take a look to see what could be happening @KhushbooMulani – sebaferreras Jun 29 '18 at 12:45
3

You may simply try the (input) event. It fires for every key input.

     <ion-textarea [(ngModel)]="text" (input)="reviewChange()"></ion-textarea>
Man Coding
  • 442
  • 5
  • 5