Angular2 - 输入字段仅接受数字

22 回答

• 0

  您可以使用angular2指令 . Plunkr

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

  回复于 2024-04-28T14:32:23+08:00
• 13

  如果你不想要一个指令

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

  in component.html

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

  in 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;
  
    }
  }
  

  回复于 2024-04-28T14:32:23+08:00
• 1

  我想 Build @omeralper给出的答案，我认为这为一个可靠的解决方案提供了良好的基础 .

  我建议的是一个简化的最新版本，其中包含最新的Web标准 . 请务必注意，event.keycode已从Web标准中删除，未来的浏览器更新可能不再支持它 . 见https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

  此外，该方法

  String.fromCharCode(e.keyCode);
  

  不保证与用户按下的键有关的keyCode映射到用户's keyboard, since different keyboard configurations will result in a particular keycode different characters. Using this will introduce bugs which are difficult to identify, and can easily break the functionality for certain users. Rather I' m上提出的使用event.key时标识的预期字母，请参阅此处的文档https://developer.mozilla.org/en-US/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();
          }
      }
  }
  

  回复于 2024-04-28T14:32:23+08:00
• 82

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

  • 自定义小数点分隔符（点或逗号）

  • 仅支持整数或整数和小数

  • 仅支持正数或正数和负数

  • 验证减号（ - ）在开头

  • 支持鼠标粘贴（尽管有一些限制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">
  

  回复于 2024-04-28T14:32:23+08:00
• 0

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

  回复于 2024-04-28T14:32:23+08:00
• 0

  您需要使用type =“number”而不是文本 . 您还可以指定最大和最小数字

  <input type="number" name="quantity" min="1" max="5">
  

  回复于 2024-04-28T14:32:23+08:00
• 5

  你可以像这样实现它

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

  希望这会帮助你 .

  回复于 2024-04-28T14:32:23+08:00
• 0

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

  如果您正在使用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>
  

  回复于 2024-04-28T14:32:23+08:00
• 0

  使用 pattern 属性进行如下输入：

  <input type="text" pattern="[0-9]+" >
  

  回复于 2024-04-28T14:32:23+08:00
• 2

  为了实现这一点，我将一个函数绑定到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 我将它设置为什么都没有替换 . 因此，当用户尝试输入不是数字的字符（在这种情况下是一个非零到九的字符）时，看起来好像文本框中没有任何内容 .

  回复于 2024-04-28T14:32:23+08:00
• 12

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

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

  用空替换无效文本 . 所有键和键组合现在可以在所有浏览器中使用，直到IE9 .

  回复于 2024-04-28T14:32:23+08:00
• -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();
      }
  
    }
  }
  

  回复于 2024-04-28T14:32:23+08:00
• 8

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

  希望这个帮助:)

  回复于 2024-04-28T14:32:23+08:00
• 37

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

  • 检查没有点

  • 将字符串转换为数字

  • check是一个整数

  • 检查大于零

  要在您的项目中实现它：

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

  • 导入您的组件

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

  • 将其添加到表单控件
    inputNumber: ['', [NumberValidator.isInteger]],

  • 如果您不想显示无效的char，请将 (change)="deleteCharIfInvalid()" 绑定到输入，如果 form.get('inputNumber').hasError('isInteger') 是 true ，则删除最后插入的char .

  // 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;
      }        
  }
  

  回复于 2024-04-28T14:32:23+08:00
• 1

  这里很简单：Simple指令在keydown事件中，它检查一个键的长度是1，键不是 preventDefault() 的数字，它不会呈现该字符 .

  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 />
  

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

  如下所示：

  EDIT: Added Code to detect change in Model and update the input's value

  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" />
  

  回复于 2024-04-28T14:32:23+08:00
• 4

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

  仅接受来自文本框模式的数字的模式（'[0-9] *'）

  仅接受具有特定数字的数字的模式，例如：Pincode . 图案（ '^ [0-9] {5} $'）

  回复于 2024-04-28T14:32:23+08:00
• 26

  当按下小键盘'1'时，fromCharCode返回'a'，因此应避免使用此方法

  （管理员：无法照常发表评论）

  回复于 2024-04-28T14:32:23+08:00
• 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();
        }
      }
  
  }
  

  回复于 2024-04-28T14:32:23+08:00
• 8

  我看到很多关于处理复制/粘贴的评论 .

  为了减少@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');
  

  回复于 2024-04-28T14:32:23+08:00
• 1

  只需使用HTML5，输入类型=“数字”

  回复于 2024-04-28T14:32:23+08:00
• 2

  你可以使用正则表达式：

  <input type="text" (keypress)="numericOnly($event)">
  
  numericOnly(event): boolean {    
      let patt = /^([0-9])$/;
      let result = patt.test(event.key);
      return result;
  }
  

  回复于 2024-04-28T14:32:23+08:00
• 6

  使用指令限制用户以下列方式仅输入数字：

  .directive('onlyNumber', function () {
      var regExp = /^[0-9]*$/;
      return {
          require: '?ngModel',
          restrict: 'A',
          priority: 1,
          link: function (scope, elm, attrs, ctrl) {
              ctrl.$validators.onlyNumber= function (modalValue) {
                  return ctrl.$isEmpty(modalValue) || regExp.test(modalValue);
              };
          }
      };
      })
  

  在HTML中：

  <input id="txtRollNumber" type="text" name="rollNumber" placeholder="Enter roll number*" ng-model="rollNumber" class="form-control" maxlength="100" required only-number />
  

  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" />
  

  回复于 2024-04-28T14:32:23+08:00