Part number Part number Part number

How to preserve Group Separators (GS), Record Separators(RS) and End Of Transmission(EOT) using KeyPress in Angular

25 Views Asked by At

Using Angular 14, I got this table here (simplified code)

        <ng-container matColumnDef="partNumber">
          <mat-header-cell *matHeaderCellDef> Part number </mat-header-cell>
          <mat-cell *matCellDef="let data; let i = index" [ngClass]="{
      }" class="custom-partNumber-cell">
            <input #partNumberInput
                   type="text"
                   name="partnumber-input"
                   [(ngModel)]="data.partNumber"
                   (keypress)="onKeypress($event)"
                   class="custom-partNumber-input">
          </mat-cell>
        </ng-container>

On any keystroke, it will go into this method

  onKeypress(event: any) {
    const printableAsciiPattern = /^[\x20-\x7E\x1D\x1E]$/;
    const character = String.fromCharCode(event.keyCode || event.which);
    console.log('character = ', character);
    console.log('event.KeyCode = ', event.keyCode);

    if (printableAsciiPattern.test(character)) {
      this.scannedValue += character;
      console.log('ScannedValue = ', this.scannedValue);

      if ([29, 30].includes(event.keyCode || event.which)) {
        event.preventDefault();
      }
    }
  }

Now if I scan a QR-code that that has this content in Edge browser:

QR-Code

Then it will preserve the GS, RS and EOT symbols, as shown in the console here:

Console log from Edge

But if I scan the same QR-code using Firefox browser, then those symbols are gone:

Console log from firefox

How can I preserve these symbols regardless which browser I am using? Tried running it through ChatGPT but to no avail - I need someone smarter than ChatGPT to help me out here!

0

There are 0 best solutions below