JS获取input的value值|极客笔记

JS获取input的value值

在网页开发中，经常需要获取用户输入的内容，而用户最常见的输入方式就是通过表单中的input输入框进行输入。通过JavaScript可以轻松地获取这些输入框中的内容，实现对用户输入内容的读取和处理。本文将为大家介绍如何使用JavaScript获取input输入框中的value值。

获取input的value值

要获取input输入框中的value值，首先需要获取对应的input元素，然后通过该元素的value属性来获取用户输入的内容。以下是一个简单的示例代码，演示了如何通过JavaScript获取一个input输入框中的值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Get Input Value</title>
</head>
<body>
    <input type="text" id="myInput">
    <button onclick="getValue()">Get Value</button>

    <script>
        function getValue() {
            var input = document.getElementById("myInput");
            var value = input.value;
            alert("Input value is: " + value);
        }
    </script>
</body>
</html>

在上面的示例中，我们创建了一个包含一个input输入框和一个按钮的简单网页。当用户点击按钮时，调用了getValue()函数，通过document.getElementById()方法获取id为myInput的input元素，然后使用input的value属性获取用户输入的值，并通过alert()方法弹出获取到的值。

运行以上代码，打开网页后在输入框中输入内容，然后点击按钮，即可弹出输入框中的内容。

获取多个input的value值

在实际开发中，可能会遇到需要获取多个input输入框中的value值的情况。可以通过遍历所有input元素，获取每个input的value值。以下是一个示例代码，演示了如何获取多个input输入框的值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Get Multiple Input Values</title>
</head>
<body>
    <input type="text" id="input1">
    <input type="text" id="input2">
    <input type="text" id="input3">
    <button onclick="getValues()">Get Values</button>

    <script>
        function getValues() {
            var inputs = document.querySelectorAll("input");
            inputs.forEach(function(input) {
                var value = input.value;
                console.log("Input value is: " + value);
            });
        }
    </script>
</body>
</html>

在上面的示例中，我们创建了包含三个input输入框和一个按钮的网页。当用户点击按钮时，调用getValues()函数，首先使用document.querySelectorAll()方法获取所有的input元素，然后通过forEach()方法遍历每个input，获取其value值并输出到控制台。

运行以上代码，打开网页后可以输入内容到多个输入框中，然后点击按钮，可以在控制台看到每个输入框中的值。