如何防止用戶在輸入字段中不輸入字母？

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?文件=src%2Fapp%2Fapp.component.ts

Answer 1

將type="number"添加到您的input元素，這應該會自動觸發數字鍵盤而不是大多數設備上的常規鍵盤。

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

你可以參考這里的stackblitz。

Answer 3

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

（也inputmode在某些瀏覽器）

參考這里

強制 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 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 ，它會處理其余的。

訪問此以了解有關指令的更多信息。

Answer 5

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

您需要添加一個事件來檢查輸入是數字還是字母。 只需在輸入字段中添加事件

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

在 TS 文件中

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

}