JS 只能输入数字和小数点|极客笔记

JS 只能输入数字和小数点

在日常的网页应用中，经常会遇到需要用户输入数字的情况，比如金额、年龄等。为了保证输入的准确性，我们需要限制用户只能输入数字和小数点，而排除其他字符的情况。本文将详细介绍如何使用JavaScript来实现这一功能。

HTML 输入框设置

首先，我们需要在HTML中创建一个输入框，让用户输入数字和小数点。代码如下：

<input type="text" id="inputNumber" onkeypress="return isNumberKey(event)">

在这段代码中，我们创建了一个文本输入框，设置了id为inputNumber。同时，我们通过onkeypress事件调用isNumberKey(event)函数，以便在用户按下键盘时进行验证。

JavaScript 函数实现

接下来，我们需要编写isNumberKey(event)函数，通过JavaScript来限制用户输入的字符。代码如下：

function isNumberKey(event) {
  var charCode = (event.which) ? event.which : event.keyCode;
  var input = document.getElementById('inputNumber').value;

  // 只允许输入数字和小数点以及退格键
  if (charCode >= 48 && charCode <= 57 || charCode == 46 || charCode == 8) {
    // 确保小数点只能出现一次
    if (charCode == 46 && input.indexOf('.') !== -1) {
      event.preventDefault();
    }
    return true;
  } else {
    event.preventDefault();
  }
}

在上面的代码中，isNumberKey(event)函数接受一个事件参数event，通过event.which和event.keyCode获取当前按下的键的字符编码。然后，我们通过判断字符编码是否在数字（48~57）、小数点（46）和退格键（8）的范围内，来决定是否允许输入。同时，我们还需要确保小数点只能输入一次，以保证输入的数字合法性。

运行效果

为了验证上述代码的效果，我们在一个HTML页面中添加一个输入框，并引入上面编写的JavaScript代码。用户只能输入数字和小数点，其他字符将无法输入。以下是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Only Numbers and Decimal Point</title>
</head>

<body>
  <input type="text" id="inputNumber" onkeypress="return isNumberKey(event)">

  <script>
    function isNumberKey(event) {
      var charCode = (event.which) ? event.which : event.keyCode;
      var input = document.getElementById('inputNumber').value;

      if (charCode >= 48 && charCode <= 57 || charCode == 46 || charCode == 8) {
        if (charCode == 46 && input.indexOf('.') !== -1) {
          event.preventDefault();
        }
        return true;
      } else {
        event.preventDefault();
      }
    }
  </script>
</body>

</html>

在浏览器中打开以上HTML文件，您会看到一个文本输入框，只能输入数字和小数点，其他字符无法输入。这样可以有效地限制用户输入的内容，确保数据的准确性。

通过以上简单的代码实现，我们成功地实现了在JavaScript中限制用户输入数字和小数点的功能。在实际应用中，可以根据具体需求对输入框进行样式美化和更严格的输入限制。