Question

这是一个HTML5问题，但与Angular有关。

我一直试图阻止在Angular表单中<input type="number">的字段中输入多个点。我试过了：

带有按键事件的输入元素中的指令，以防止多个点。
自定义验证程序，以便在出现多个点时引发错误。

目前，我尝试使用应用于输入的指令阻止多点/逗号输入，当已经存在点/逗号或输入值为无效数字时删除点/逗号。

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[single-dot]'
})
export class SingleDotDirective {
  private el: HTMLInputElement;

  constructor(private elementRef: ElementRef) {
    this.el = this.elementRef.nativeElement;
  }

  @HostListener('keypress', ['$event'])
  onkeypress(event: KeyboardEvent): void {
    const invalidInput = this.el.validity.badInput;
    const inputCharSeparator =
      String.fromCharCode(event.charCode) === '.' ||
      String.fromCharCode(event.charCode) === ',';
    const alreadyWithSeparator =
      this.el.value.toString().indexOf('.') !== -1 ||
      this.el.value.toString().indexOf(',') !== -1;

    if (inputCharSeparator && (alreadyWithSeparator || invalidInput)) {
      event.preventDefault();
    }
  }
}

但是我发现了一个问题，当我尝试捕获当前输入值时，浏览器在数字无效时返回一个空字符串。您可以在此处查看原因：How to get the raw value an <input type="number"> field?

例如，对于像

这样的字段

<input type="number" id="edQuantity">

edQuantity.value将返回：

"2.1"如果输入的数字是2.1
""如果输入的数字是2.
"2.1"如果输入的数字是2,1
2如果输入的数字为2,

如果我检查edQuantity.validity.badInput最后一个案例，我会false。

当逗号存在时，我的代码无法检测到输入值是否错误，因此您可以输入以下值：

2,.22

所以，我的问题是：

为什么验证结果与,不同？
逗号出现在字段中的功能是什么？
我想修改我的代码吗？

我已经在Chrome和Fx中对此进行了测试。

谢谢！

在<input type =“number”/>字段中出现逗号的功能是什么？

0 个答案: