如何防止用户不在输入字段中输入字母？

Question

我有一个手机输入框，用户可以在其中输入 his/her 数字，但目前用户可以在输入法中输入字母 field.I 希望用户只输入 10 位数字而不是字母。这是我的代码

<section class="col-sm-12 bg-white  pl-20 pr-20">
  <div>

    <form novalidate [formGroup]="cfForm">

        <div class="form-group col-sm-4 pl-0">
          <label class="field-title mb-5">Mobile Number</label>
          <input type="password" placeholder="Enter Mobile no" formControlName="mobile_no">
        </div>


    </form>
    {{cfForm.valid | json }}
    {{cfForm.value | json}}
  </div>
</section

TS文件

  constructor(private fb: FormBuilder){
     this.cfForm = this.fb.group({
          mobile_no: ['', [Validators.required, Validators.pattern('^[0-9]{10}$')]],

    });

我不想使用 type="number" 或 "text"。我只想使用 "password" 因为我不想向任何人显示我的电话号码见代码 https://stackblitz.com/edit/angular-jfqkfo?file=src%2Fapp%2Fapp.component.ts

Answer 1

将 type="number" 添加到您的 input 元素，这应该会自动触发数字键盘而不是大多数设备上的常规键盘。

Answer 2

使用 HTML5，您可以使用公共属性 pattern。

（在某些浏览器中还有 inputmode）

引用 here

强制 10 位数字的正则表达式模式：^[0-9]{10}$

示例：

<form action="javascript: alert('alright');">
<div>
  <input type="password" 
         pattern="^[0-9]{10}$"
         minlength="10" maxlength="10"
         placeholder="Enter Mobile no"
         required title="Ten digits required.">
  <input type="submit">
</div>
</form>

Answer 3

使用 preventDefault() 方法和正则表达式
HTML

 <input type="password" (keypress)="matcher($event)"
    placeholder="Enter Mobile no" formControlName="mobile_no">

组件：

 public matcher(event) {
        const allowedRegex = /[0-9]/g;

        if (!event.key.match(allowedRegex)) {
            event.preventDefault();
        }
    }

Answer 4

首先，您可以将 maxlength 属性添加到您的输入字段，这将只允许传递 10 个字符。像下面这样：

现在只验证数字字符，我建议您应该创建一个指令并在所有需要仅验证数字的地方使用该指令。

.html

    <form novalidate [formGroup]="cfForm">

        <div class="form-group col-sm-4 pl-0">
          <label class="field-title mb-5">Mobile Number</label>
          <input NumbersOnly="true" type="password" placeholder="Enter Mobile no" formControlName="mobile_no" maxlength="10">
        </div>


    </form>
    {{cfForm.valid | json }}
    {{cfForm.value | json}}
  </div>
</section>

NumbersOnly.directive.ts

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[NumbersOnly]'
})
export class NumbersOnlyDirective {

 constructor(private el: ElementRef) { }

 @Input() NumbersOnly: boolean;


 @HostListener('keydown', ['$event']) onKeyDown(event) {
 let e = <KeyboardEvent> event;
 if (this.NumbersOnly) {
  if ([46, 8, 9, 27, 13].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();
    }
  }
}
}

这样你就可以实现你想要的。使用此方法的主要优点是，在您的整个项目中，只要您需要 Number Only 验证，您只需在输入字段中添加 NumbersOnly = true，它将处理其余部分。

访问这里了解更多关于 Directives 的信息。

Answer 5

根据讨论，您可以限制使用按键代码输入字母。

参考以下代码:-

.ts:-

  validateNumber(event) {
    const keyCode = event.keyCode;

    const excludedKeys = [8, 37, 39, 46];

    if (!((keyCode >= 48 && keyCode <= 57) ||
      (keyCode >= 96 && keyCode <= 105) ||
      (excludedKeys.includes(keyCode)))) {
      event.preventDefault();
    }
  }

HTML:-

<input type="password" placeholder="Enter Mobile no" formControlName="mobile_no" (keydown)="validateNumber($event)">

You can refer to the stackblitz here.

如何防止用户不在输入字段中输入字母？

how to prevent user not to enter alphabets in input fied?

javascript

angular

angular-reactive-forms