How can I specifically activate the keydown event for alphanumeric and special characters in Angular7?

Question

How can I specifically activate the keydown event for alphanumeric and special characters in Angular7?

I am looking to create a keydown event that will be triggered by alphanumeric or special characters like #$@.

  <input type="text" style="width: 70%;" [(ngModel)]= "textMessage" (keydown) ="sendTypingEvent()" >

However, I want to prevent the event from being triggered by keys such as enter, escape (esc), shift, alt, tab, backspace and command (meta), arrows, and function keys (f1 through f12).

Is it possible to set up a REGEX pattern directly in the HTML?

<input (keydown.a)="..."> --expect to trigger

Currently, I can filter out unwanted keys within the event handling function as shown below. But I am exploring other options.

sendTypingEvent(event) {
  if (event.key === "Enter" || event.key ==='esc' .... ) {
    console.log("skip this event");
  }

}

javascript angular typescript

Answer 1

Answer №1

Below are two methods for restricting the keydown event:

Allow only alphanumeric key presses

sendTypingEvent(event){
        if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 65 && event.keyCode <= 90)){
            console.log("input was 0-9");
            console.log("input was a-z");
            return true;
        }

        return false;
    }

Restrict specific keys

sendTypingEvent(event){
        if ((event.keyCode >= 112 && event.keyCode <= 123) || event.keyCode == 16){
            console.log("Disabled f11 to f12, shift keys");
            return false
        }
}

For more information on Keycodes, visit -

Answer 2

Below are two methods for restricting the keydown event:

Allow only alphanumeric key presses

sendTypingEvent(event){
        if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 65 && event.keyCode <= 90)){
            console.log("input was 0-9");
            console.log("input was a-z");
            return true;
        }

        return false;
    }

Restrict specific keys

sendTypingEvent(event){
        if ((event.keyCode >= 112 && event.keyCode <= 123) || event.keyCode == 16){
            console.log("Disabled f11 to f12, shift keys");
            return false
        }
}

For more information on Keycodes, visit -

Answer 3

Answer №2

document.getElementById("myinput").addEventListener("input", function(event) {
  if (/[!'^+%&/()=?_\-~`;#$½{[\]}\\|<>@,]/gi.test(event.data)) {
    console.log(event.data) // or
    // your operation
  }
})

<input id="myinput" type="text" style="width: 70%;">

If you need to display only special characters in the console, modify your trigger function as shown below:

sendTypingEvent(event) {
  if (/[!'^+%&/()=?_\-~`;#$½{[\]}\\|<>@,]/gi.test(event.key)) {
    console.log(event.key);
  }
}

Answer 4

document.getElementById("myinput").addEventListener("input", function(event) {
  if (/[!'^+%&/()=?_\-~`;#$½{[\]}\\|<>@,]/gi.test(event.data)) {
    console.log(event.data) // or
    // your operation
  }
})

<input id="myinput" type="text" style="width: 70%;">

If you need to display only special characters in the console, modify your trigger function as shown below:

sendTypingEvent(event) {
  if (/[!'^+%&/()=?_\-~`;#$½{[\]}\\|<>@,]/gi.test(event.key)) {
    console.log(event.key);
  }
}

How can I specifically activate the keydown event for alphanumeric and special characters in Angular7?

Answer №1

Answer №2

Similar questions

Eslint is unable to locate file paths when it comes to Solid.js tsx extensions

The Angular Material side navigation module is not being acknowledged

How can I simulate the response of a VueX action using Vue-test-utils?

What is the proper way to create a regex pattern that specifies 'without any spaces'?

establish expiration date for image

JavaScript JSON YouTube API viewCount function is not functioning correctly

Refreshing manually will display only the JSON data

What is the best way to define a variable that captures and logs the values from multiple input variables?

How can I programmatically adjust the center of a Google Maps v3 map?

Determine whether AngularJS directive method binding automatically defaults to angular.noop

Is it possible to utilize localStorage.getItem within Next.js while using redux toolkit?

The promise node design pattern

Prevent user scrolling when full-screen menu is activated

The date format adjustments vary depending on the web browser being used

Error: The use of "let" as a lexically bound identifier is not permitted

Having trouble retrieving data values from methods within my Vue.js component

Having trouble triggering a click event with JQuery

Using jQuery to Check Cookies and Hide Content Depending on the Value and Data Attributes

React Project Encounters NPM Installation Failure

Utilizing NodeJS alongside Express to retrieve JSON response on the Client side