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

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

Answer 2

使用HTML5，您可以使用公共属性inputmode，也可以使用pattern。
参考here

示例：

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

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

如何防止用户不要在输入文件中输入字母？

4 个答案: