The onChange() function should only consider the last character typed, rather than evaluating the entire line each time

Question

The onChange() function should only consider the last character typed, rather than evaluating the entire line each time

Explanation: I am utilizing the onChange function to detect when someone types the symbol @.

Issue: While typing, the code currently checks the entire line each time a character is added, causing a lag in typing speed. I am looking to update the code so it only checks the most recently typed character.

Snippet of my code:

home.html

<ion-textarea #chat [(ngModel)]="tag" rows="1" cols="10" placeholder="Type your message..." (ngModelChange)='onChange($event)'></ion-textarea>

home.ts

onChange(eve)
{
if(eve.match(/@/g).length > 0)

The current implementation slows down the typing experience as it checks the entire line with each keystroke. I aim to optimize it to only examine the last character that was typed.

angular typescript ionic-framework ionic2 ionic3

Answer 1

Answer №1

Here is a suggested way to implement it:

Template:

<ion-textarea #message [(ngModel)]="input" rows="2" cols="15" placeholder="Type your text..." (keypress)="onKeyPress($event)"></ion-textarea>

Typescript:

onKeyPress(event) {
    if (event.key == '!') {
      console.log("! key pressed")
    }
  }

Live Demo

Answer 2

Here is a suggested way to implement it:

Template:

<ion-textarea #message [(ngModel)]="input" rows="2" cols="15" placeholder="Type your text..." (keypress)="onKeyPress($event)"></ion-textarea>

Typescript:

onKeyPress(event) {
    if (event.key == '!') {
      console.log("! key pressed")
    }
  }

Live Demo

Answer 3

Answer №2

To detect key presses, you can utilize the keydown event:

<input (keydown)="onKeydown($event)">

Here's how you can handle it:

onKeydown(event) {
  if(event.key === "@")
  {  
    // Add your code here
  }
}

Alternatively, if you only want to check the last character in a string for changes using onChange, you can do so like this:

if(eve.slice(-1) === '@') {}

Answer 4

To detect key presses, you can utilize the keydown event:

<input (keydown)="onKeydown($event)">

Here's how you can handle it:

onKeydown(event) {
  if(event.key === "@")
  {  
    // Add your code here
  }
}

Alternatively, if you only want to check the last character in a string for changes using onChange, you can do so like this:

if(eve.slice(-1) === '@') {}

Answer 5

Answer №3

If you're looking to identify the last alphabet in a string, you could use this method:

onInputChange(event) {   
  event = event.split('')[event.length-1] 
  if(event.match(/@/g).length > 0) 
  ...
}

Answer 6

If you're looking to identify the last alphabet in a string, you could use this method:

onInputChange(event) {   
  event = event.split('')[event.length-1] 
  if(event.match(/@/g).length > 0) 
  ...
}

The onChange() function should only consider the last character typed, rather than evaluating the entire line each time

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to differentiate between the legend and chart when working with three separate

"Utilizing the power of Angular 6's JSON pipe

Developing client-side components with NextJS

The code written inside the <script> tag seems to be malfunctioning when placed in the component.html file within VScode while working with

Oh no! A critical mistake has occurred: Mark-compact operations are not working efficiently near the heap limit, leading to a failed allocation due to the

What is the best way to link labels with input fields located separately in Angular?

The conundrum of Content-Type in Angular 8's HttpClient Post request

Availability of variables and declaration of functions

Collapsible list in Angular2 sidenav: ensuring only one sublist remains open

Encountering Angular 8 error TS2304 at line 39: Cannot find the specified name after shutting down WebStorm

Different ways to categorize elements of Timeline using typescript

Exploring the depths of Angular's nested formGroups

Module 'next-intl/client' cannot be located

What is the process for running an npm package command on a specific subdirectory using PowerShell?

Limitation for class instance, not an object

Is it possible to include the term 'public' exclusively within a .ts file in a TypeScript TSLint React environment?

Angular Github Deployment Issue: Page malfunctioning as a result of strict-origin-when-cross-origin restriction

Tips on implementing pdf-lib in Angular?

What is the reason for restricting a placeholder for an optional property in the interface to only be of type any?

Properly implement Angular/Typescript to populate an array with chosen objects