限制文本输入值的正确方法(例如,仅限数字)

Question

是否可以实现一个input允许只在内部键入数字而无需手动处理event.target.value？

在React中,可以定义value属性,然后输入更改将基本上绑定到该值(无法在不value更改的情况下修改它).见例子.它没有任何努力就可以正常工作.

在Angular 2中,可以定义[value],但它只是初始设置值,然后input不会阻止修改.

我正在玩,ngModel并[value] / (input)看到例子.

但在这两个实现中都存在一个基本问题:

1. 键入10时(模型值为10;输入值为10) - 正确
2. 当你输入10d之后(模型值为10 - 未修改,所有非数字都被删除;输入值为10d) - 不正确,因为模型值与之前相同
3. 键入10d3时 - (模型值为103;输入值为103) - 正确

如何做到这一点(从第一眼看)组件,无需手动处理event.target.value？...

更新我不是在寻找原生HTML5 input[number]元素.这里输入的数字仅用于示例 - 当我需要限制输入文本时,可能会有更多任务.

此外,input[number]1)不限制我打字10ddd和2)(不太重要)包含我不需要的箭头.

这里的问题是阻止用户输入超出限制值的内容,而不是允许输入任何内容并在之后验证它

Answer 1

在component.ts中添加此功能

_keyUp(event: any) {
    const pattern = /[0-9\+\-\ ]/;
    let inputChar = String.fromCharCode(event.key);

    if (!pattern.test(inputChar)) {
      // invalid character, prevent input
      event.preventDefault();
    }
}

在您的模板中使用以下内容

<input(keyup)="_keyUp($event)">

这将在angular2捕获事件之前捕获输入.

Answer 2

经过大量的研究,我最终创建了一个满足要求的功能.我创建的函数限制所有特殊字符,只允许字母和数字..并且该函数适用于复制粘贴和键入两者.希望它有效:)

 public inputValidator(event: any) {
    //console.log(event.target.value);
    const pattern = /^[a-zA-Z0-9]*$/;   
    //let inputChar = String.fromCharCode(event.charCode)
    if (!pattern.test(event.target.value)) {
      event.target.value = event.target.value.replace(/[^a-zA-Z0-9]/g, "");
      // invalid character, prevent input

    }
  }

     <input type="text" [(ngModel)]="abc.abc" (input)="inputValidator($event)" />

你如何使用 -
1)在你的ts文件的类组件中添加上述方法.
2)在输入事件上调用方法inputValidator($ event).

Answer 3

inputmask插件可以做到最好.它非常灵活,你可以提供你喜欢的任何正则表达式来限制输入.它也不需要JQuery.

第1步:安装插件:

npm install --save inputmask

Step2:创建一个包含输入掩码的指令:

import {Directive, ElementRef, Input} from '@angular/core';
import * as Inputmask from 'inputmask';


@Directive({
  selector: '[app-restrict-input]',
})
export class RestrictInputDirective {

  // map of some of the regex strings I'm using (TODO: add your own)
  private regexMap = {
    integer: '^[0-9]*$',
    float: '^[+-]?([0-9]*[.])?[0-9]+$',
    words: '([A-z]*\\s)*',
    point25: '^\-?[0-9]*(?:\\.25|\\.50|\\.75|)$'
  };

  constructor(private el: ElementRef) {}

  @Input('app-restrict-input')
  public set defineInputType(type: string) {
    Inputmask({regex: this.regexMap[type], placeholder: ''})
      .mask(this.el.nativeElement);
  }

}

第3步:

<input type="text" app-restrict-input="integer">

查看他们的github文档以获取更多信息.

Answer 4

测试答案由我:

form.html

<input type="text" (keypress)="restrictNumeric($event)">

form.component.ts:

public restrictNumeric(e) {
  let input;
  if (e.metaKey || e.ctrlKey) {
    return true;
  }
  if (e.which === 32) {
   return false;
  }
  if (e.which === 0) {
   return true;
  }
  if (e.which < 33) {
    return true;
  }
  input = String.fromCharCode(e.which);
  return !!/[\d\s]/.test(input);
 }

Answer 5

您可以使用类型编号的HTML5输入

它不接受其声明中的任何字符

<input type="number" [(model)]='myvar' min=0 max=100 step=5 />

以下是角度2的使用示例 [(model)]

http://www.webpackbin.com/VJNUNF0M-

Answer 6

在 HTML<input>字段中写入：(keypress)="onlyNumberKey($event)"

并在 ts 文件中写入：

onlyNumberKey(event) {
    return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57;
}

Answer 7

我认为自定义ControlValueAccessor是最好的选择。

未经测试，但据我记得，这应该有效：

<input [(ngModel)]="value" pattern="[0-9]">