CODEWITHSUNDEEP
angularangular8angular-directiveangular9
Mohamed Sahir
Mohamed Sahir

Reputation: 2543

How to allow copy paste only for number directive angular 9

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();
        }
      }
  }
}

Upvotes: 0

Views: 4425

Answers (2)

bat7
bat7

Reputation: 866

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();
  }
}

Upvotes: 0

Jeyashree .A
Jeyashree .A

Reputation: 17

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.

Upvotes: 1

Related Questions