繁体   English   中英

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

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

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

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

6 个回复

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

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

请参考以下代码:-

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

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

首先,您可以将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 ,它会处理其余的。

访问此以了解有关指令的更多信息。

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

您需要添加一个事件来检查输入是数字还是字母。 只需在输入字段中添加事件

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

}

1 将用户输入限制为字母表

我是一名学习python的技术作家。 我想编写一个用于验证名称字段输入的程序,作为一种惯例,将用户条目限制为字母表。我在这里看到了用于验证数字(年龄)字段的类似代码,并将其用于字母表,如下所示: import re 我打算这个代码块做两件事。 即,显示输入提示,直到用户仅将字 ...

2012-01-10 07:49:15 3 7626   python
2 限制用户输入/删除任何字母

我正在尝试使用AngularJS(使用UI-Ace )进行ACE编辑器。 我有一个查询。 我可以限制用户吗 除了预定义的字符(例如;),不要输入任何字符 不删除除预定义字符或空格以外的任何字符 UI-Ace on angular公开了ACE编辑器的onChange事 ...

4 如何限制用户在 Python 中仅输入字母?

我是一名尝试学习 Python 的初学者。 第一个问题。 试图找到一种方法让用户只输入字母。 写了这个,但是不行! 它返回True ,然后跳过 rest,然后继续执行else子句。 break也不起作用。 有人能指出为什么吗? 我认为这是非常基本的,但我被困住了,如果有人能把我拉出来,我会很感激 ...

5 如何计算日期并显示输入字段的剩余日期?

我想来一个代码,显示某个日期仍然有效以及持续多长时间。 到目前为止,我想出的代码可以检查日期是否不在将来。 但是我无法知道日期是否仍然有效。 有人能帮我吗? function TheorieFunction() { var startDate = new Date(document ...

6 如何允许用户输入带有空格的字母(例如John Mike)但不允许用户输入带有数字值的字母?

我想创建一个简单的C程序,以允许用户键入他们的姓名并打印出他们的姓名(例如John Mike)。 但是我也希望程序禁止用户键入名称中带有数字值的名称(例如John34 Mike)。 我知道如何使用scanf("%[^\\n]",&amp;name); 但是使用该用户可能会意外地在输入名 ...

8 如何防止用户在文本框的开头输入空格?

我有一个包含三个字段的表单,名称,电子邮件地址和密码。 现在我要防止用户在值的开头输入空格“”,假设用户不能仅在字段中输入空格。 我试图像这样修复它: 但无法修复。 谁能帮我..谢谢。 ...

9 如何防止用户按回车键?

我想阻止用户输入除 +、-、/、* 以外的输入,并且我编写的代码工作正常,它阻止用户输入数字、字符串、空格,但是当用户按下 ENTER KEY 时程序跳过输入问题并转到下一个代码块。 如何防止用户按 ENTER KEY 并跳过“输入运算符:”输入问题? ...

2020-12-21 20:49:21 2 107   python
10 Android中的动态输入和操作

我是Android开发的新手。 现在我知道片段的使用但是堆积成一个问题,我需要在片段上添加更多输入字段,当只有用户在运行时需要时。 此外,我需要捕获该输入字段的值并通过MainActivity计算它们的值,并将其推送到另一个Activity页面的另一个片段。 我知道如何从片段中收集数据 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM