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

Question

我有一个手机输入字段，用户可以在其中输入他/她的号码，但目前用户可以在输入字段中输入字母。我希望用户只会 输入 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

对于 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 2

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

参考以下代码：-

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

Answer 3

首先，您可以将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();
    }
  }
}
}

这样你就可以实现你想要的。 使用此方法的主要优点是，在您的整个项目中，无论您需要仅数字验证的任何位置，您都可以在输入字段中简单地添加 NumbersOnly = true，其余部分将由它处理。

访问此处以了解有关Directives 的更多信息。

Answer 4

使用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 5

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