Angular2-仅接受数字的输入字段

86

在Angular 2中，如何屏蔽输入字段（文本框），使其仅接受数字而不接受字母字符？

我有以下HTML输入：

<input 
  type="text" 
  *ngSwitchDefault 
  class="form-control" 
  (change)="onInputChange()" 
  [(ngModel)]="config.Value" 
  (focus)="handleFocus($event)" 
  (blur)="handleBlur($event)"
/>

上面的输入是通用文本输入，可以用作简单文本字段或用作数字字段，例如以显示年份。

使用Angular 2，我如何使用相同的输入控件并在此字段上应用某种过滤器/掩码，以使其仅接受数字？

我可以通过哪些不同的方式实现这一目标？

注意：我需要仅使用文本框而不使用输入数字类型来实现此目的。

html  angular  input  angularjs-directive 
— 阿尼鲁达（Aniruddha Pondhe）
source
1
您能只使用html属性吗？type = number
— inoabrian
@inoabrian我想在不使用数字类型的情况下实现这一点。
— Aniruddha Pondhe
— chandan7

Answers:

112

您可以使用angular2指令。普伦克 

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

并且您需要在输入中将指令名称写为属性

<input OnlyNumber="true" />

不要忘记在模块的声明数组中编写指令。

通过使用正则表达式，您仍然需要功能键

export class OnlyNumber {

  regexStr = '^[0-9]*$';
  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+V
        (e.keyCode == 86 && 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;
        }
      let ch = String.fromCharCode(e.keyCode);
      let regEx =  new RegExp(this.regexStr);    
      if(regEx.test(ch))
        return;
      else
         e.preventDefault();
      }
  }
}
— 奥梅拉珀
source
1
那很棒。使用RegEx模式可以以任何方式实现相同目的吗？
— Aniruddha Pondhe
3
它不允许复制粘贴。
— Shardul '17
@Shardul只是增加(e.keyCode == 86 && e.ctrlKey === true)了条件，复制正常但粘贴无效
— Al-Mothafar
我添加e.keyCode == 109 || e.keyCode ==190了.，-但-不被接受？
— 丹尼尔（Daniel）
1
如何添加空格，加号和减号？
— Zahidul Islam Ruhel '18
65

如果您不想要指令

https://stackblitz.com/edit/numeric-only

在component.html中

<input (keypress)="numberOnly($event)" type="text">

在component.ts中

export class AppComponent {

  numberOnly(event): boolean {
    const charCode = (event.which) ? event.which : event.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
      return false;
    }
    return true;

  }
}
— 拉希登克
source
33
这种方法的问题在于，关键事件无法捕获用户粘贴或浏览器自动填充输入字段的情况。因此，这是一个糟糕的解决方案。
— Darryn Hosking '18
30

我知道这是一个古老的问题，但是由于这是常见的功能，因此我想分享一下我所做的修改：

  • 自定义小数点分隔符（点或逗号）
  • 仅支持整数或整数和小数
  • 仅支持正数或正负
  • 验证减号（-）是否在开头
  • 支持鼠标粘贴（通过https://caniuse.com/#feat=clipboard有一些限制）
  • 支持Mac命令键

  • 替换字符串，例如“ .33”和“ 33”。正确的版本：0.33和33.0

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

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

    @Input() allowDecimals: boolean = true;
    @Input() allowSign: boolean = false;
    @Input() decimalSeparator: string = '.';

    previousValue: string = '';

    // --------------------------------------
    //  Regular expressions
    integerUnsigned: string = '^[0-9]*$';
    integerSigned: string = '^-?[0-9]+$';
    decimalUnsigned: string = '^[0-9]+(.[0-9]+)?$';
    decimalSigned: string = '^-?[0-9]+(.[0-9]+)?$';

    /**
     * Class constructor
     * @param hostElement
     */
    constructor(private hostElement: ElementRef) { }

    /**
     * Event handler for host's change event
     * @param e
     */
    @HostListener('change', ['$event']) onChange(e) {

            this.validateValue(this.hostElement.nativeElement.value);
}

/**
 * Event handler for host's paste event
 * @param e
 */
@HostListener('paste', ['$event']) onPaste(e) {

    // get and validate data from clipboard
    let value = e.clipboardData.getData('text/plain');
    this.validateValue(value);
    e.preventDefault();
}

/**
 * Event handler for host's keydown event
 * @param event
 */
@HostListener('keydown', ['$event']) onKeyDown(e: KeyboardEvent) {

    let cursorPosition: number = e.target['selectionStart'];
    let originalValue: string = e.target['value'];
    let key: string = this.getName(e);
    let controlOrCommand = (e.ctrlKey === true || e.metaKey === true);
    let signExists = originalValue.includes('-');
    let separatorExists = originalValue.includes(this.decimalSeparator);

    // allowed keys apart from numeric characters
    let allowedKeys = [
        'Backspace', 'ArrowLeft', 'ArrowRight', 'Escape', 'Tab'
    ];

    // when decimals are allowed, add
    // decimal separator to allowed codes when
    // its position is not close to the the sign (-. and .-)
    let separatorIsCloseToSign = (signExists && cursorPosition <= 1);
    if (this.allowDecimals && !separatorIsCloseToSign && !separatorExists) {

        if (this.decimalSeparator == '.')
            allowedKeys.push('.');
        else
            allowedKeys.push(',');
    }

    // when minus sign is allowed, add its
    // key to allowed key only when the
    // cursor is in the first position, and
    // first character is different from
    // decimal separator
    let firstCharacterIsSeparator = (originalValue.charAt(0) != this.decimalSeparator);
    if (this.allowSign && !signExists &&
        firstCharacterIsSeparator && cursorPosition == 0) {

        allowedKeys.push('-');
    }

    // allow some non-numeric characters
    if (allowedKeys.indexOf(key) != -1 ||
        // Allow: Ctrl+A and Command+A
        (key == 'a' && controlOrCommand) ||
        // Allow: Ctrl+C and Command+C
        (key == 'c' && controlOrCommand) ||
        // Allow: Ctrl+V and Command+V
        (key == 'v' && controlOrCommand) ||
        // Allow: Ctrl+X and Command+X
        (key == 'x' && controlOrCommand)) {
        // let it happen, don't do anything
        return;
    }

    // save value before keydown event
    this.previousValue = originalValue;

    // allow number characters only
    let isNumber = (new RegExp(this.integerUnsigned)).test(key);
    if (isNumber) return; else e.preventDefault();
}

/**
 * Test whether value is a valid number or not
 * @param value
 */
validateValue(value: string): void {

    // choose the appropiate regular expression
    let regex: string;
    if (!this.allowDecimals && !this.allowSign) regex = this.integerUnsigned;
    if (!this.allowDecimals && this.allowSign) regex = this.integerSigned;
    if (this.allowDecimals && !this.allowSign) regex = this.decimalUnsigned;
    if (this.allowDecimals &&  this.allowSign) regex = this.decimalSigned;

    // when a numbers begins with a decimal separator,
    // fix it adding a zero in the beginning
    let firstCharacter = value.charAt(0);
    if (firstCharacter == this.decimalSeparator)
        value = 0 + value;

    // when a numbers ends with a decimal separator,
    // fix it adding a zero in the end
    let lastCharacter = value.charAt(value.length-1);
    if (lastCharacter == this.decimalSeparator)
        value = value + 0;

    // test number with regular expression, when
    // number is invalid, replace it with a zero
    let valid: boolean = (new RegExp(regex)).test(value);
    this.hostElement.nativeElement['value'] = valid ? value : 0;
}

/**
 * Get key's name
 * @param e
 */
getName(e): string {

    if (e.key) {

        return e.key;

    } else {

        // for old browsers
        if (e.keyCode && String.fromCharCode) {

            switch (e.keyCode) {
                case   8: return 'Backspace';
                case   9: return 'Tab';
                case  27: return 'Escape';
                case  37: return 'ArrowLeft';
                case  39: return 'ArrowRight';
                case 188: return ',';
                case 190: return '.';
                case 109: return '-'; // minus in numbpad
                case 173: return '-'; // minus in alphabet keyboard in firefox
                case 189: return '-'; // minus in alphabet keyboard in chrome
                default: return String.fromCharCode(e.keyCode);
            }
        }
    }
}

用法：

 <input NumbersOnly
        [allowDecimals]="true"
        [allowSign]="true"
        type="text">
— 埃尔维斯·费尔南德斯（Elvis Fernandez）
source
我更改了validatevalue方法的最后一行，以防止为无效粘贴添加零。如果（有效）{this.hostElement.nativeElement ['value'] = value;}
— 阿卜杜勒·雷曼
您还可以添加拖放验证吗？此外，我注意到输入字段的值确实更改为0填充的前导和尾随十进制分隔符值，但是该值在双向绑定变量中未更新。例如：[（NgModel）] =“ myVariable”，在此，如果我们在输入字段中输入.3，则文本输入的值在模糊时变为0.3，但myVariable的值仍为'.3'。
— Sushmit Sagar
缺少“删除并输入”输入，但无论如何解决方案都很好
— Oleg Bondarenko
29

我想以@omeralper给出的答案为基础，我认为这为坚实的解决方案奠定了良好的基础。

我提议的是具有最新Web标准的简化和最新版本。请务必注意，event.keycode已从网络标准中删除，将来的浏览器更新可能不再支持它。参见https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

此外，方法 

String.fromCharCode(e.keyCode);

由于不同的键盘配置将导致特定的键码具有不同的字符，因此不能保证与用户按下的键有关的keyCode映射到用户键盘上标识的预期字母。使用此功能将引入难以识别的错误，并且很容易破坏某些用户的功能。相反，我建议使用event.key，请参阅此处的文档https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/key

此外，我们只希望结果输出为有效的小数。这意味着应接受数字1、11.2、5000.2341234，但不应接受值1.1.2。

请注意，在我的解决方案中，我不包含剪切，复制和粘贴功能，因为它会打开错误窗口，尤其是当人们在相关字段中粘贴不需要的文本时。这将需要对keyup处理程序进行清理。这不是该线程的范围。

这是我提出的解决方案。

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

@Directive({
    selector: '[myNumberOnly]'
})
export class NumberOnlyDirective {
    // Allow decimal numbers. The \. is only allowed once to occur
    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> = [ '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;
        }

        // Do not use event.keycode this is deprecated.
        // See: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
        let current: string = this.el.nativeElement.value;
        // We need this because the current value on the DOM element
        // is not yet updated with the value from this event
        let next: string = current.concat(event.key);
        if (next && !String(next).match(this.regex)) {
            event.preventDefault();
        }
    }
}
— 让·保罗·A
source
这是一个非常有趣的方法。您是否对不使用较旧的方法（例如（e.keyCode == 67 && e.ctrlKey === true））的复制/粘贴功能有任何建议？
— Ender2050
1
我没有亲自尝试过，但是您可以类似地收听触发的复制/粘贴事件。它们生成一个ClipboardEvent（developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent），其中包含要复制/粘贴的数据。唯一的缺点是，这仍然是试验性的，并且仅由最新的浏览器支持-caniuse.com/#search=paste
— JeanPaul A.
我尝试了类似的方法，但不幸的是，这并非在每种情况下都有效。您的“ next”变量假定所按下的字符位于当前键入值的末尾。并非总是如此。例如，如果有人键入100，然后决定通过在前面附加1来使其变为1100。您的“下一个”变量将不正确（1001）。
— 卡洛斯·罗德里格斯
由于“下一个”值仅用于检查输入量是否为有效的小数（而不是设置该值），因此在末尾附加该值不会更改正则表达式验证。
— JeanPaul A.
只有我想将此行添加到输入控件中。<input myNumberOnly type =“ text” id =“ yourId”>
— Lrodriguez84 '18
17

更简洁的解决方案。试试这个指令。

如果您使用的是ReactiveForms，也可以使用。

export class NumberOnlyDirective {
  private el: NgControl;

  constructor(private ngControl: NgControl) {
    this.el = ngControl;
  }

  // Listen for the input event to also handle copy and paste.
  @HostListener('input', ['$event.target.value'])
  onInput(value: string) {
    // Use NgControl patchValue to prevent the issue on validation
    this.el.control.patchValue(value.replace(/[^0-9]/g, ''));
  }
}

在您的输入中使用它像这样：

<input matInput formControlName="aNumberField" numberOnly>
— 本古拉帕
source
1
尽管此解决方案有效，但它会两次触发模型更改事件，这表示使用正则表达式的方法是正确的，这是一个不会两次触发模型更改事件的版本：stackblitz.com/edit/…–
— ntziolis，
ntziolis的评论：到目前为止，Ben Gulapa的解决方案对我有用。但是ntziolis引用的解决方案不是。如果我错了，请原谅我，但似乎至少在我看来，上面链接到stackblitz的代码的问题是我键入的最后一个不需要的字符，尽管它在用户界面中从未显示过放入我组件的绑定变量中。只是最后一个不需要的角色。
— user2367418
继续我的评论：使用Angular 7和HMTL输入文本（限于两个字符）。
— user2367418
15 
<input type="text" (keypress)="keyPress($event)">


  keyPress(event: any) {
    const pattern = /[0-9\+\-\ ]/;

    let inputChar = String.fromCharCode(event.charCode);
    if (event.keyCode != 8 && !pattern.test(inputChar)) {
      event.preventDefault();
    }
  }
— 吉丹·普拉丹
source
12

你可以这样实现

<input type="text" pInputText (keypress)="onlyNumberKey($event)" maxlength="3"> 

onlyNumberKey(event) {
    return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57;
}

//for Decimal you can use this as

onlyDecimalNumberKey(event) {
    let charCode = (event.which) ? event.which : event.keyCode;
    if (charCode != 46 && charCode > 31
        && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

希望这会帮助你。

— 帕迪普·Ja那
source
你能详细说明一下吗？event.charCode == 8在做什么？
— bosari
9

您可以使用正则表达式：

<input type="text" (keypress)="numericOnly($event)">

numericOnly(event): boolean {    
    let patt = /^([0-9])$/;
    let result = patt.test(event.key);
    return result;
}
— Aathreya
source
1
是的，它是有益的，但我想也小数在我的输入字段（。）
— 临空乔杜里
6

使用pattern属性输入如下所示：

<input type="text" pattern="[0-9]+" >
— Behnam Azimi
source
它不起作用。当您开始输入内容时，您输入的字符是错误的
— Seyed-Amir-Mehrizi
6

我知道这有很多答案，但是我需要处理以下问题（所有答案似乎都没有完全支持）：

  • 支持textarea并提供多行选项
  • 小数或负数
  • 每行最大长度
  • 跨浏览器支持（Chrome，Edge，IE 11）
  • 处理剪切/粘贴操作和事件

该解决方案允许我定义这样的文本区域：

<textarea class="form-control" [(ngModel)]="this.myModelVariable"
    appOnlyNumbers [allowNegative]="true" [allowMultiLine]="true" 
    [allowDecimal]="true" [maxLength]="10"
    placeholder="Enter values (one per line)"></textarea>

或者，如果我只想要正整数

<textarea class="form-control" [(ngModel)]="this.myModelVariable"
    appOnlyNumbers [allowMultiLine]="true" [maxLength]="9"
    placeholder="Enter values (one per line)"></textarea>

这是我的指令：

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

@Directive({
  selector: '[appOnlyNumbers]'
})
export class OnlyNumbersDirective {
  constructor(private el: ElementRef) { }

  @Input() allowMultiLine: boolean = false;
  @Input() allowNegative: boolean = false;
  @Input() allowDecimal: boolean = false;
  @Input() maxLength: number = 0;
  regex: RegExp;

  @HostListener('keypress', ['$event'])
  onKeyPress(event: KeyboardEvent) {
    this.validate(event, event.key === 'Enter' ? '\n' : event.key);
  }

  @HostListener('paste', ['$event'])
  onPaste(event: Event) {
    const pastedText = (<any>window).clipboardData && (<any>window).clipboardData.getData('Text') // If IE, use window
      || <ClipboardEvent>event && (<ClipboardEvent>event).clipboardData.getData('text/plain'); // Non-IE browsers
    this.validate(event, pastedText);
  }

  @HostListener('cut', ['$event'])
  onCut(event: Event) {
    this.validate(event, '');
  }

  validate(event: Event, text: string) {
    const txtInput = this.el.nativeElement;
    const newValue = (txtInput.value.substring(0, txtInput.selectionStart)
      + text + txtInput.value.substring(txtInput.selectionEnd));
    if (!this.regex) {
      this.regex = <RegExp>eval('/^'
        + (this.allowNegative ? '-?' : '')
        + (this.allowDecimal ? '((\\d+\\.?)|(\\.?))\\d*' : '\\d*')
        + '$/g');
    }
    var lines = this.allowMultiLine ? newValue.split('\n') : [newValue];
    for (let line of lines) {
      let lineText = line.replace('\r', '');
      if (this.maxLength && lineText.length > this.maxLength || !lineText.match(this.regex)) {
        event.preventDefault();
        return;
      }
    }
  }

}
— 杰森·W
source
4

为了完成此任务，我将一个函数绑定到了onInput方法，如下所示：

(input)="stripText(infoForm.get('uin'))

这是我表单中的示例：

<form [formGroup]="infoForm" (submit)="next()" class="ui form">
    <input type="text" formControlName="uin" name="uin" id="uin" (input)="stripText(infoForm.get('uin'))" required/>
</form>

然后，我向组件添加了以下功能：

  stripText(control: FormControl) {
   control.setValue(control.value.replace(/[^0-9]/g, ''));
  }

这个正则表达式/[^0-9]/g搜索不是数字的任何东西，并使用.replace我将其设置为不替换任何东西。因此，当用户尝试键入不是数字的字符（在这种情况下，该字符不是从零到9的字符）时，似乎在文本框中什么也没有发生。

— 克里斯托弗
source
4

好，感谢JeanPaul A.和rdanielmurphy。我已经制定了自己的Custom指令，将输入字段限制为仅数字。还添加了最大和最小输入属性。也可以在角度7中工作。

角度的

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

@Directive({
  selector: '[appNumberOnly]'
})
export class NumberOnlyDirective {
  // Allow decimal numbers. The \. is only allowed once to occur
  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> = ['Backspace', 'Tab', 'End', 'Home'];
  constructor(private el: ElementRef) { }

  @Input() maxlength: number;
  @Input() min: number;
  @Input() max: number;

  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    // Allow Backspace, tab, end, and home keys
    if (this.specialKeys.indexOf(event.key) !== -1) {
      return;
    }

    // Do not use event.keycode this is deprecated.
    // See: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
    const current: string = this.el.nativeElement.value;

    // We need this because the current value on the DOM element
    // is not yet updated with the value from this event
    const next: string = current.concat(event.key);
    if (next && !String(next).match(this.regex) || (this.maxlength && next.length > this.maxlength) ||
      (this.min && +next < this.min) ||
      (this.max && +next >= this.max)) {
      event.preventDefault();
    }
  }

  @HostListener('paste', ['$event']) onPaste(event) {
    // Don't allow pasted text that contains non-numerics
    const pastedText = (event.originalEvent || event).clipboardData.getData('text/plain');

    if (pastedText) {
      const regEx = new RegExp('^[0-9]*$');
      if (!regEx.test(pastedText) || (this.maxlength && pastedText.length > this.maxlength) ||
        (this.min && +pastedText < this.min) ||
        (this.max && +pastedText >= this.max)) {
        event.preventDefault();
      }
    }
  }

}

的HTML

<input type="text" class="text-area" [(ngModel)]="itemName" maxlength="3" appNumberOnly />
— 狐狸
source
4

最佳答案的现代方法（不建议使用e.keyCode）：

@HostListener('keydown', ['$event']) onKeyDown(event) {
    let e = <KeyboardEvent> event;
    if (['Delete', 'Backspace', 'Tab', 'Escape', 'Enter', 'NumLock', 'ArrowLeft', 'ArrowRight', 'End', 'Home', '.'].indexOf(e.key) !== -1 ||
      // Allow: Ctrl+A
      (e.key === 'a' && (e.ctrlKey || e.metaKey)) ||
      // Allow: Ctrl+C
      (e.key === 'c' && (e.ctrlKey || e.metaKey)) ||
      // Allow: Ctrl+V
      (e.key === 'v' && (e.ctrlKey || e.metaKey)) ||
      // Allow: Ctrl+X
      (e.key === 'x' && (e.ctrlKey || e.metaKey))) {
      // let it happen, don't do anything
      return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].indexOf(e.key) === -1)) {
      e.preventDefault();
    }
}
— 阿戈雷卡
source
1
这太棒了！@Directive（{选择器：“ [inputNumericInput]”}）导出类NumericInputDirective {@HostListener（）}
— Nate
1
效果很好。在复制粘贴中仅观察到副作用。它允许复制粘贴外部非数字字符串。Google搜索并找到了一个更好的解决方案，可以解决此问题@ stackblitz.com
— edit
4

任意RegExp指令

这是一个小指令，它使用任意正则表达式并阻止用户键入无效值

显示代码段

要仅屏蔽数字，请使用

<input [allowedRegExp]="'^[0-9]*$'" type="text" ... >
— 卡米尔（KamilKiełczewski）
source
不幸的是，您可以通过发送抑扬符+任何您想写的东西来欺骗此解决方案。
— ProgFroz
3

只需创建一个指令并添加以下hostlistener：

@HostListener('input', ['$event'])
    onInput(event: Event) {
        this.elementRef.nativeElement.value = (<HTMLInputElement>event.currentTarget).value.replace(/[^0-9]/g, '');
    }

将无效的文本替换为空。在IE9之前，所有键和组合键现在都可以在所有浏览器中使用。

— 高拉夫·乔希
source
如果以char作为起始类型，char将不会追加，但是模型长度的计数为1。如何解决呢？同样，如果元素具有最大长度，然后复制并粘贴混合的内容，则模型计数将为最大长度。例如，最大长度为10，然后将1238261jhgjh12987复制并粘贴到输入中将仅附加123816，但是模型的长度为10。有什么解决方案吗？
— Satheesh Natarajan '18
3

有效手机号码模式的模式（'^（（\ + 91-？）| 0）？[0-9] {10} $'）

文本框样式中仅接受数字的样式（'[0-9] *'）

只能接受带有特定数字的号码的模式，例如：密码。模式（'^ [0-9] {5} $'）

— 萨蒂什·德卡（Satish Deokar）
source
2

我对上述指令进行了一些修改，并实现了min，max，maxlength。

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

@Directive({
  selector: '[numberOnly]'
})
export class NumbersOnlyDirective {

  private regex: RegExp = new RegExp(/[0-9]/g);
  // Allow key codes for special events. Reflect :
  private specialKeys: Array<number> = [46, 8, 9, 27, 13, 110, 190, 35, 36, 37, 39];
  // Backspace, tab, end, home

  @Input() maxlength: number;
  @Input() min: number;
  @Input() max: number;

  constructor(private el: ElementRef) {
  }
    @HostListener('keydown', ['$event'])
    onKeyDown(event: KeyboardEvent) {
    e = <KeyboardEvent>event;

if ((
  (this.specialKeys.indexOf(event.which) > -1) ||
  // to allow backspace, enter, escape, arrows  
  (e.which == 65 && e.ctrlKey == true) ||
  // Allow: Ctrl+C        
  (e.which == 67 && e.ctrlKey == true) ||
  // Allow: Ctrl+X
  (e.which == 88 && e.ctrlKey == true))) {
  return;
} else if (// to allow numbers  
  (e.which >= 48 && e.which <= 57) ||
  // to allow numpad number  
  (event.which >= 96 && event.which <= 105)) { }
else {
      event.preventDefault();
    }
    let current: string = this.el.nativeElement.value;

    let next: string = current.concat(event.key);
    if ((next && !String(next).match(this.regex)) ||
      (this.maxlength && next.length > this.maxlength) ||
      (this.min && +next < this.min) ||
      (this.max && +next >= this.max)) {
      event.preventDefault();
    }

  }
}
— 卡兰·米斯特里
source
如何从输入字段给出最大长度值
— Jason Brody
<input id =“ COMN” class =“ wb-e-inp-1__input” type =“ text” appNumberOnly maxlength =“ 10” />工作
— Jason Brody
1

来自@omeralper的答案。我做了一些更改，将不接受句号ascii（键码110,190）。并使用let ch =（e.key）; 当您更改语言（例如泰语或日语）时与正则表达式进行比较时，它将不接受该语言的字符

export class OnlyNumber {

  regexStr = '^[0-9]*$';
  constructor(private el: ElementRef) { }

  @Input() OnlyNumber: boolean;

  @HostListener('keydown', ['$event']) onKeyDown(event) {
    let e = <KeyboardEvent> event;
    if (this.OnlyNumber) {
      // console.log(event, this.OnlyNumber);
        if ([46, 8, 9, 27, 13].indexOf(e.keyCode) !== -1) {
          return;
        }
      let ch = (e.key);
      let regEx =  new RegExp(this.regexStr);   
      if(regEx.test(ch))
        return;
      else
         e.preventDefault();
    }
  }
}

希望这个帮助:)

— Supakorn通特拉
source
1

您可以创建此验证器并将其导入到组件中。
基本上验证表单输入字符串：

  • 检查没有点
  • 将字符串转换为数字
  • 检查是一个整数
  • 校验大于零

要在您的项目中实现它：

  1. 应用文件夹中的建议路径：src / app / validators / number.validator.ts

  2. 导入您的组件

    import { NumberValidator } from '../../validators/number.validator';

  3. 将其添加到窗体控件
    inputNumber: ['', [NumberValidator.isInteger]],
  4. 如果不想显示无效的字符(change)="deleteCharIfInvalid()"，则将a绑定到输入，如果form.get('inputNumber').hasError('isInteger')是 true，则删除最后插入的字符。
// FILE: src/app/validators/number.validator.ts

import { FormControl } from '@angular/forms';

export interface ValidationResult {
    [key: string]: boolean;
}

export class NumberValidator {

    public static isInteger(control: FormControl): ValidationResult {
        // check if string has a dot
        let hasDot:boolean = control.value.indexOf('.') >= 0 ? true : false;
        // convert string to number
        let number:number = Math.floor(control.value);
        // get result of isInteger()
        let integer:boolean = Number.isInteger(number);
        // validate conditions 
        let valid:boolean = !hasDot && integer && number>0;
        console.log('isInteger > valid', hasDot, number, valid);
        if (!valid) {
            return { isInteger: true };
        }
        return null;
    }        
}
— 吉列夫
source
会不会Number.isInteger(Math.floor(control.value))永远是真的？我认为应该parseFloat改为。
— AndyTheEntity
1

支持清理粘贴的内容：

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

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

    DIGITS_REGEXP =  new RegExp(/\D/g);
    constructor(private el: ElementRef) { 

        // Sanatize clipboard by removing any non-numeric input after pasting
        this.el.nativeElement.onpaste = (e:any) => {
            e.preventDefault();
            let text;
            let clp = (e.originalEvent || e).clipboardData;
            if (clp === undefined || clp === null) {
                text = (<any>window).clipboardData.getData('text') || '';
                if (text !== '') {
                    text = text.replace(this.DIGITS_REGEXP, '');
                    if (window.getSelection) {
                        let newNode = document.createElement('span');
                        newNode.innerHTML = text;
                        window.getSelection().getRangeAt(0).insertNode(newNode);
                    } else {
                        (<any>window).selection.createRange().pasteHTML(text);
                    }
                }
            } else {
                text = clp.getData('text/plain') || '';
                if (text !== '') {
                    text = text.replace(this.DIGITS_REGEXP, '');
                    document.execCommand('insertText', false, text);
                }
            }
        };
    }

  @HostListener('keydown', ['$event']) onKeyDown(event) {
    let e = <KeyboardEvent> event;
    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();
      }
    }

}
— mad_fox
source
1

这是一个简单的方法：简单的指令在keydown事件中，它会检查键的长度是否为1，而key不是数字preventDefault()，因此不会呈现该char。

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

@Directive({
    selector: '[numbersOnly]'
})
export class NumbersOnlyDirective {
    @HostListener('keydown', ['$event'])
    keyDownEvent(event: KeyboardEvent) {
        if (event.key.length === 1 && (event.which < 48 || event.which > 57)) {
            event.preventDefault();
        }
    }

}

HTML： 

<input type="text" [(ngModel)]="numModel" numbersOnly />

限制：允许使用鼠标粘贴，这样可以接受其他字符。为了避免这种情况，您可以将模型作为输入传递给指令和ngOnChage模型的值更改为仅数字：

如下所示：

编辑：添加代码以检测模型中的更改并更新输入的值

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

@Directive({
    selector: '[numbersOnly]'
})
export class NumbersOnlyDirective implements OnChanges {

    @Input() numbersOnly: any;

    constructor(private el: ElementRef) {}

    @HostListener('keydown', ['$event'])
    keyDownEvent(event: KeyboardEvent) {
        // Add other conditions if need to allow ctr+c || ctr+v
        if (event.key.length === 1 && (event.which < 48 || event.which > 57)) {
            event.preventDefault();
        }
    }

    ngOnChanges(changes) {
        if (changes.numbersOnly) {
            this.el.nativeElement.value = this.el.nativeElement.value.replace(/[^0-9]/g, '');
        }
    }

}

HTML： 

<input type="text" [(ngModel)]="numModel" [numbersOnly]="numModel" />
— 拉哈尔·沙（Lahar Shah）
source
如果以char开头类型，char将不会追加，但是模型长度的计数为1。如何解决？
— Satheesh Natarajan
当您检查长度时，在更改前后，指令中的长度保持为0。如果在某一点是1，则应迅速恢复为0。
— Lahar Shah
不，这不对。只需尝试在模板中绑定numModel.length并检查长度计数
— Satheesh Natarajan
1 
 import {Directive, ElementRef, HostListener, Output, EventEmitter} from '@angular/core';


    //only-digits
    @Directive({
      selector: '[only-digits]'
    })
    export class OnlyDigits {

      constructor(public el: ElementRef) {

        this.el.nativeElement.onkeypress = (evt) => {
          if (evt.which < 48 || evt.which > 57) {
            evt.preventDefault();
          }
        };

      }
    }

指令也是最好的方法

— 普拉莫特·帕蒂尔（Pramod Patil）
source
1
  1. <input oninput="this.value=this.value.replace(/[^0-9]/g,'')"

或：2.在HTML文件中：

 <input [(ngModel)]="data" (keypress)="stripText($event)"
     class="form-control">

在ts文件中：

stripText(event) {
const seperator  = '^([0-9])';
const maskSeperator =  new RegExp(seperator , 'g');  
let result =maskSeperator.test(event.key);   return result;   }

这2个解决方案有效

— mehdi_abol
source
请使用代码块格式化代码段。
— YuS
0

当按下数字键盘“ 1”时，fromCharCode返回“ a”，因此应避免使用这种方法

（管理员：无法像往常一样发表评论）

— fdsfdsfdsfds
source
0

我看到了很多有关处理复制/粘贴的评论。

要从@omeralper答案中获得收益，可以在onlyNumber指令中添加粘贴事件处理程序，以处理复制/粘贴操作： 

 @HostListener('paste', ['$event']) onPaste(event) {
  // Don't allow pasted text that contains non-numerics
  var pastedText = (event.originalEvent || event).clipboardData.getData('text/plain');

  if (pastedText) {
    var regEx = new RegExp('^[0-9]*$');
    if (!regEx.test(pastedText)) {
      event.preventDefault();
    }
}

仅当内容为数字时，这才允许将内容复制并粘贴到文本框中。那是最简单的解决方案。更改剪贴板内容以删除非数字内容要复杂得多，可能不值得。

要从IE获取粘贴的文本，可以使用以下命令：

window.clipboardData.getData('Text');
— 丹尼尔墨菲
source
0

只是写起来不够简单

onlyNumbers(event) {
if(isNaN(event.target.value * 1)) {
 console.log("Not a number")
} else {
  console.log("Number")
}

}

— Prajwal Ravishankar
source
0

您还可以创建一个实现ControlValueAccessor接口的指令（https://angular.io/api/forms/ControlValueAccessor）。

在此处查看工作示例：https : //stackblitz.com/edit/angular-input-field-to-accept-only-numbers

您可以收听“ input”事件，而无需检查键码。由于具有ControlValueAccessor接口，它支持复制和粘贴并与Angular Forms API很好地集成。

指示：

@Directive({
    ...
    selector: '[onlyNumber]'
})
export class OnlyNumberDirective implements ControlValueAccessor {
private onChange: (val: string) => void;
...
private value: string;

constructor(
    private elementRef: ElementRef,
    private renderer: Renderer2
) {
}

...

@HostListener('input', ['$event.target.value'])
onInputChange(value: string) {
    const filteredValue: string = filterValue(value);
    this.updateTextInput(filteredValue, this.value !== filteredValue);
}

private updateTextInput(value, propagateChange) {
    this.renderer.setProperty(this.elementRef.nativeElement, 'value', value);
    if (propagateChange) {
        this.onChange(value);
    }
    this.value = value;
}

// ControlValueAccessor Interface
...

registerOnChange(fn: any): void {
    this.onChange = fn;
}

writeValue(value: string): void {
    value = value ? String(value) : '';
    this.updateTextInput(value, false);
}
}


function filterValue(value): string {
    return value.replace(/[^0-9]*/g, '');
}

用法：

<input name="number" type="text" onlyNumber [(ngModel)]="someNumber">
— Spierala
source
0

正在投放，因为它也可以与前0一起使用，例如00345

@Directive({
  selector: '[appOnlyDigits]'
})
export class AppOnlyDigitsDirective {
  @HostListener('input', ['$event'])
  onKeyDown(ev: KeyboardEvent) {
    const input = ev.target as HTMLInputElement;
    input.value = String(input.value.replace(/\D+/g, ''));
  }
}
— 威客
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.