How to allow copy paste only for number directive angular 9

Question

I have a textbox field that accepts only number.when type the textbox other than numbers it won't allow.

problem: 1)copy + paste need to allow only for numbers? 2) if I prevent copy-paste , it prevents all.

How to do that. currently, it allows for all.

here is the directive.

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[OnlyNumber]'
})
export class NumericDirective {

  constructor(private el: ElementRef) { }

  @Input() OnlyNumber: boolean;

  @HostListener('keydown', ['$event']) onKeyDown(event) {
    let e = <KeyboardEvent> event;
    if (this.OnlyNumber) {
      if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
        // Allow: Ctrl+A
        // (e.keyCode == 65 && e.ctrlKey === true) ||
        // Allow: Ctrl+C
        // (e.keyCode == 67 && e.ctrlKey === true) ||
        // // Allow: Ctrl+X
        // (e.keyCode == 88 && e.ctrlKey === true) ||
        // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
          // let it happen, don't do anything
          return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
      }
  }
}

for a directive that only "allow" I think that a better aproach is use the `@HostListener('input',['$event'])`. You can see a bit old code in https://stackoverflow.com/questions/54460923/angular-2-restrict-input-field/54462816#54462816 — Eliseo, Aug 10 '20 at 08:47
I'm never sure how one should handle the case of character `e` which is always allowed in number inputs as part of scientific notation. — user776686, Aug 30 '22 at 07:10

Jeyashree .A · Answer 1 · 2022-11-15T06:24:33.697

After some research, I found this method. Am not sure if it's the cleanest job but it does the work with respect to copy/paste.

@HostListener('keyboard',['$event']
onKeyDown(event: KeyboardEvent) {
   // Define Regex

   // This will allow copy and select all to happen without any issues.
   if (event.metaKey) {
        if (event.key.toLowerCase() === 'a' || event.key.toLowerCase() === 'c' || event.key.toLowerCase() === 'v') {
            return;
        }
    }

   //Validate the keystrokes across regex
}

@HostListener('paste', ['$event'])
onPaste(event: ClipboardEvent) {
   let dataToPaste = event.clipboardData.getData('text');

   // Validate 'dataToPaste' against the regex
}

As above, apart from listening to the keydown event, I have added a listener for the paste event. I suggest the functionality to validate the text against the regex be a separate function. Validating the text to be copied will ensure we have only numbers.

score 0 · Answer 2 · answered Dec 14 '22 at 12:58

0

I used this code, works perfect

@HostListener('paste', ['$event']) onPaste(e: ClipboardEvent) {
  let event = e.clipboardData.getData('text');
  //allow paste only number values
  if (!Number(event)){
    e.preventDefault();
  }
}

answered Dec 14 '22 at 12:58

bat7

836
1
8
22

How to allow copy paste only for number directive angular 9

2 Answers2