时间戳

首页 > 解决方案 > 仅允许 Angular 7 中文本框的十进制值

javascript - 仅允许 Angular 7 中文本框的十进制值

问题描述

在 Angular 7 中，如何屏蔽输入字段（文本框），使其仅接受十进制值，例如 (8.15 or 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;
  }

标签： javascriptregexangular7angular-directive

解决方案

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

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

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

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

推荐阅读