javascript - 字段中的字符

Question

我已经对此进行了大量研究，但仍然找不到好的解决方案。基本上，我的表单中有这个字段应该ONLY 允许数字。但是，我可以通过以下方式在该字段中输入 ma​​c 特殊字符:

按住 option + shift 然后按键盘上的任意按钮(例如:h j k l u i 等)。

请看附件。

任何人都可以帮助我不允许在 ID 字段中使用此类字符吗？非常感谢!

这是我的代码:

LIVE DEMO

ID: <input formControlName="userid" type="text" pKeyFilter="num" placeholder="Numbers" pInputText>

Answer 1

有很多方法可以解决这个问题。所有提供的解决方案都应该有效。我的建议是方法 2。

方法一

您可以像这样尝试在输入事件中删除非数字字符

<input 
    formControlName="userid"
    type="text"
    placeholder="Numbers"
    oninput="javascript: this.value = this.value.replace(new RegExp('[^0-9]', 'gm'), '')"
    pInputText
/>

Modified Demo

我在 MacOS 上的 Firefox 和 Chrome 中对此进行了测试，它似乎工作正常。

方法二

要从您的 Angular 模块执行此操作:

使用简单的文本输入

<input
    formControlName="userid"
    type="text"
    placeholder="Number"
    pInputText
/>

监听变化并相应地修补值。不要忘记在 init 上注册您的观察者。

registerChangeObservers() {
    this.registrationFormGroup.get("userid").valueChanges.subscribe(val => {
      this.registrationFormGroup.patchValue({
        'userid': val.replace(new RegExp('[^0-9]', 'gm'), '')
      }, { emitEvent: false });
    });
  }

ngOnInit() {
    this.registerChangeObservers();
  }

特别注意 { emitEvent: false } 部分。您需要设置它以避免递归。如果您的模型变得无效并且因此它的值更改为零，则此方法可能会失败。例如，如果您将输入类型设置为数字，但用户设法输入非数字字符，就会发生这种情况。为避免这种情况，请确保输入验证不会因特殊字符而失败，例如通过将输入类型设置为文本。

Demo here

方法 3

为避免显示修改字符，您还可以监听输入事件(即按键)而不是实际值更改。这相当于方法 1。为此，请使用此输入

<input
    formControlName="userid"
    type="text"
    placeholder="Number" 
    pInputText
    (input)="onPress($event)"
/>

并将此功能添加到您的 Controller

onPress($event) {
    this.registrationFormGroup.patchValue({
        'userid': $event.target.value.replace(new RegExp('[^0-9]', 'gm'), '')
      }, { emitEvent: false });
  }

Demo 3

注意:我通常会避免这种方法，因为根据我的经验，禁止修改字符可能会对一些不常见的输入法产生意想不到的副作用，尤其是在移动设备上。上面的方法(方法 2)也有效，而且在我看来更安全。尽管会显示修改字符，但它们会在下一次用户操作时消失，并且永远不会出现在您的模型数据中。