JS获取input输入框内容|极客笔记

JS获取input输入框内容

在网页开发中，经常会涉及到获取用户输入的内容，其中最常见的方式就是通过输入框（<input>）来实现。在本文中，我们将详细介绍如何使用JavaScript来获取输入框中的内容。

获取input输入框内容的基本方法

要获取输入框中的内容，我们首先需要获取对应的输入框元素，并通过其value属性来获取用户输入的内容。以下是一个简单的示例：

<!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>Get Input Value</title>
</head>
<body>
  <input type="text" id="myInput">
  <button onclick="getValue()">Get Value</button>

  <script>
    function getValue() {
      var inputElement = document.getElementById('myInput');
      var value = inputElement.value;
      alert(value);
    }
  </script>
</body>
</html>

在上述示例中，我们首先创建了一个<input>输入框，并为其指定了一个唯一的id属性。然后再创建了一个按钮，当点击该按钮时，会调用getValue()函数。在该函数中，我们通过document.getElementById('myInput')获取到输入框元素，然后再通过value属性获取输入框中的内容，最后使用alert()方法将获取到的内容弹出显示。

实时获取input输入框内容

除了通过按钮点击来获取输入框中的内容，有时候我们需要实时获取输入框中的内容。这可以通过监听输入框的input事件来实现。以下是一个示例代码：

<!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>Real-time Get Input Value</title>
</head>
<body>
  <input type="text" id="myInput" oninput="realTimeGetValue()">

  <script>
    function realTimeGetValue() {
      var inputElement = document.getElementById('myInput');
      var value = inputElement.value;
      console.log(value);
    }
  </script>
</body>
</html>

在上述示例中，我们通过给输入框绑定oninput="realTimeGetValue()"事件来监听输入框内容的变化。每次输入框内容改变时，都会触发realTimeGetValue()函数，实现实时获取输入框中的内容，并通过console.log()将内容输出到控制台。

获取多个输入框内容

如果页面中存在多个输入框，我们可以通过循环或者直接获取指定id的方式来获取每个输入框中的内容。以下是一个简单的示例：

<!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>Get Multiple Input Values</title>
</head>
<body>
  <input type="text" id="input1">
  <input type="text" id="input2">
  <button onclick="getValues()">Get Values</button>

  <script>
    function getValues() {
      var input1 = document.getElementById('input1').value;
      var input2 = document.getElementById('input2').value;
      console.log('Input 1:', input1);
      console.log('Input 2:', input2);
    }
  </script>
</body>
</html>

在上述示例中，我们创建了两个输入框，并为它们分别指定了不同的id。当点击按钮时，会调用getValues()函数，在该函数中我们通过document.getElementById('input1').value和document.getElementById('input2').value分别获取两个输入框的内容，并输出到控制台。

获取输入框内容并进行处理

除了简单地获取输入框中的内容，有时候我们可能需要对获取到的内容进行处理，比如格式验证、计算等。以下是一个示例代码，展示如何获取输入框内容并计算其平方值：

<!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>Handle Input Value</title>
</head>
<body>
  <input type="number" id="numberInput">
  <button onclick="calculateSquare()">Calculate Square</button>

  <script>
    function calculateSquare() {
      var inputElement = document.getElementById('numberInput');
      var input = inputElement.value;
      var result = Math.pow(input, 2);
      console.log('Square of', input, 'is', result);
    }
  </script>
</body>
</html>

在上述示例中，我们创建了一个类型为number的输入框，用户只能输入数字。当点击按钮时，会调用calculateSquare()函数，在该函数中我们首先获取输入框的值，然后计算其平方值并输出到控制台。

通过上面的示例代码，我们可以看到如何使用JavaScript来获取输入框中的内容，并在不同场景下进行处理。在实际开发中，可以根据具体需求对获取到的内容进行相应的逻辑处理。