仅允许 Angular 7 中文本框的十进制值答案

【问题标题】：Allow only decimal value to the textbox in angular 7仅允许 Angular 7 中文本框的十进制值
【发布时间】：2020-02-27 14:12:04
【问题描述】：

在 Angular 7 中，如何屏蔽输入字段（文本框），使其仅接受十进制值，例如（8.15 或 15.25）？

我有以下 HTML 输入：

<input type="text" name="amount" id="amount" pattern="[0-9]+(\.[0-9][0-9]?)?" (keypress)="numbersOnly($event)">

我有以下函数 numbersOnly，它只允许十进制数字，但它不应该允许多次输入小数点 (.)，如下所示。

8.155454 或 8.65.24

它应该只允许在数字后保留 1 个小数点，如下所示。

8.15 或 80.45 或 555.14

下面是我只接受十进制值的函数。

 numbersOnly(event: any) {
    let charCode = (event.which) ? event.which : event.keyCode;
    if (charCode != 46 && charCode > 31
        && (charCode < 48 || charCode > 57))
        return false;
    return true;
  }

【问题讨论】：

你应该利用 HTML5 的 <input type="number" step="0.01"> stackoverflow.com/q/19011861/2191572
@MonkeyZeus 抱歉，但它也允许多次输入小数点 (.)，我想在输入时限制它应该只允许一个小数点 (.)

标签： javascript regex angular7 angular-directive

【解决方案1】：

您可以使用 keypress 事件来捕获输入值并在事件处理程序中检查是否只有一位小数。

我通过将onkeypress="return slideNumber_keyFilter( event );" 添加到我的输入元素来完成此操作，然后使用此函数：

      <script>
        function slideNumber_keyFilter( event ) {
          return ( ( event.charCode >= 48 ) && ( event.charCode <= 57 ) );
        }
      </script>

在我的情况下不允许任何句点，但您可以简单地替换检查输入的代码并跟踪是否输入了句点，并禁止另一个。

【讨论】：