CODEWITHSUNDEEP
javascriptangulartypescriptinputangular-directive
BlizZard
BlizZard

Reputation: 589

'Numbers only directive' not working in Chrome 49.xx.xx and below

I am using angular 6 and have written a directive to restrict the input to numbers only, for some of my input fields. The directive looks like this

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

@Directive({
  selector: '[NumbersOnly]'
})

export class NumbersOnlyDirective {
  // Allow decimal numbers and negative values
  private regex: RegExp = new RegExp(/^-?[0-9]+(\.[0-9]*){0,1}$/g);
  // Allow key codes for special events. Reflect :
  // Backspace, tab, end, home
  private specialKeys: Array<string> = ['ArrowLeft', 'ArrowRight', 'Backspace', 'Tab', 'End', 'Home'];

  constructor(private el: ElementRef) { }

  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    // Allow Backspace, tab, end, and home keys
    if (this.specialKeys.indexOf(event.key) !== -1) {
      return;
    }
    const current: string = this.el.nativeElement.value;
    const next: string = current.concat(event.key);
    if (next && !String(next).match(this.regex)) {
      event.preventDefault();
    }
  }
}

and where ever I have my input fields, I use the directive as below

<input [(ngModel)]="sendLinkMobile" NumbersOnly type="text" id="mobile-num"  
class="form-control m-no" placeholder="Mobile Number"  requried  minlength="10" 
maxlength="10" aria-label="Recipient's username" aria-describedby="basic-addon2">

The code works perfectly in all the latest browsers, mobiles, tabs. But, when using it on chrome 49.xx and below, the input fields are not taking any values. Can anyone help me where the issue is?

Thanks in Advance.

Upvotes: 0

Views: 304

Answers (1)

Mohammad Daliri
Mohammad Daliri

Reputation: 1386

Use it directive and check it out. I think Its work on chrome 49.xx

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

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

  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 || e.metaKey)) ||
        // Allow: Ctrl+C
        (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
        // Allow: Ctrl+V
        (e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
        // Allow: Ctrl+X
        (e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
        // 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();
        }
      }
  }
}

HTML:

<input OnlyNumber="true"  type="text" #numberModel="ngModel" [(ngModel)]="numberModel"  name="numberModel" />

Upvotes: 1

Related Questions