Question 383051 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript textarea keydown detect if Alt gr key being pressed and prevent its action futher

I Have a character limit in my text area and when it reaches a verge of 999 out of 1000 i dont want any accent characters to be entered.
Im not able to capture the final output of combination key, so when only 1 characters is left i need to detect Alt gr key being pressed and prevent its action further as not proceed with that combination.

keyDownEvent(e){
  if ( (charactersLeft === maxLength -1) && e.keyCode === 18) {
    e.preventDefault();
  }
}

The above is not working still the key combination happens and accent key(alt gr + a = ā) is being printed. How to stop this event.

Three separate events are triggerred onKeydown (Alt gr + a)

  1. ctrl key – altKey: false, ctrlKey: true, key: "Control", keyCode: 17
  2. alt key – altKey: false, ctrlKey: false, key: "AltGraph", keyCode: 18
  3. a key – altKey: false, ctrlKey: false, key: "a", keyCode: 65
Tags:

3

Answers


  1. 0

    You are checking only the alt key, but you also need to check the ctrl key.

      // Check if Ctrl and Alt are pressed together
  if (charactersLeft === maxLength - 1 && e.ctrlKey && e.altKey) {
    e.preventDefault();
    // Optionally, alert the user or handle the logic here
  }
    Login or Signup to reply.
  2. 0 
    textarea.addEventListener('keypress', function(e) {
  const maxLength = 1000;
  const charactersLeft = this.value.length;

  // Check if the textarea is about to reach its limit
  if (charactersLeft === maxLength - 1) {
    // Check if the pressed key combination is associated with Alt Gr
    if (e.altKey && e.key.length > 1) {
      // If it is, prevent the default action (input of accent characters)
      e.preventDefault();
    }
  }
});

    you may want to log the values of e.altKey and e.key to see what values they have when the keypress event is triggered.

    Login or Signup to reply.
  3. 0

    You can use the below code, where we capture the input using the regex /[^x00-x7F]/i and remove the extra characters using the regex /[\x00-\x7F]*/i, after the character limit!

    FULL CODE:

    import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { PermitDirective } from './app/input.directive';

@Component({
  selector: 'app-root',
  imports: [PermitDirective],
  standalone: true,
  template: `
  Paste This inside the text area:
  <div style="width:500px;overflow-wrap: break-word;">zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz☺☺</div>
    <textarea (input)="onInputChange($event)" maxlength="1000" style="width:500px;" rows="20"></textarea>
  <br/>
  capturedInput: {{capturedInput}}
  `,
})
export class App {
  name = 'Angular';
  limit = 1000;
  capturedInput = '';

  onInputChange(event: any) {
    const value = event?.target?.value;
    if (value.length > this.limit - 1) {
      const valueToCheck = value.substring(this.limit - 1, Infinity);
      this.capturedInput = valueToCheck.match(/[^x00-x7F]/i).toString();
      event.target.value += valueToCheck.match(/[\x00-\x7F]*/i).toString();
    }
    return true;
  }
}

bootstrapApplication(App);

    Stackblitz Demo

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search