js怎么获取input的value

通过JavaScript获取input的value的方法有多种，包括使用document对象、事件监听器等。以下是几种常见的方法：使用document.getElementById()、使用document.querySelector()、监听事件获取实时值。具体实现方法如下：

一、使用 document.getElementById()

使用 document.getElementById() 是最常见、最直接的方法。通过ID直接获取元素，再获取其value属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取Input值</title>
</head>
<body>
    <input type="text" id="myInput" value="初始值">
    <button onclick="getValue()">获取值</button>
    <script>
        function getValue() {
            var inputValue = document.getElementById('myInput').value;
            alert(inputValue);
        }
    </script>
</body>
</html>

在上面的代码中，getElementById('myInput') 获取输入框元素，然后通过 .value 获取其值。

二、使用 document.querySelector()

如果你使用的是类名或者其他选择器，可以使用 document.querySelector()。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取Input值</title>
</head>
<body>
    <input type="text" class="myInput" value="初始值">
    <button onclick="getValue()">获取值</button>
    <script>
        function getValue() {
            var inputValue = document.querySelector('.myInput').value;
            alert(inputValue);
        }
    </script>
</body>
</html>

三、监听事件获取实时值

通过事件监听器可以实时获取输入框的值，例如 input 事件或者 change 事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取Input值</title>
</head>
<body>
    <input type="text" id="realTimeInput" value="初始值">
    <p id="displayValue">当前值：</p>
    <script>
        var inputElement = document.getElementById('realTimeInput');
        var displayElement = document.getElementById('displayValue');
        inputElement.addEventListener('input', function() {
            displayElement.textContent = '当前值：' + inputElement.value;
        });
    </script>
</body>
</html>

在这个例子中，input 事件会在输入框内容改变时实时触发，更新显示的值。

四、使用表单提交获取值

如果你需要在表单提交时获取输入框的值，可以在提交事件中获取。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取Input值</title>
</head>
<body>
    <form id="myForm">
        <input type="text" id="formInput" value="初始值">
        <button type="submit">提交</button>
    </form>
    <script>
        document.getElementById('myForm').addEventListener('submit', function(event) {
            event.preventDefault();  // 阻止表单提交默认行为
            var inputValue = document.getElementById('formInput').value;
            alert(inputValue);
        });
    </script>
</body>
</html>

五、使用框架如jQuery获取值

如果你使用的是jQuery，可以使用 val() 方法获取输入框的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取Input值</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="jqueryInput" value="初始值">
    <button id="getValueBtn">获取值</button>
    <script>
        $('#getValueBtn').click(function() {
            var inputValue = $('#jqueryInput').val();
            alert(inputValue);
        });
    </script>
</body>
</html>

以上是多种通过JavaScript获取input值的方法，每种方法都有其适用的场景。选择合适的方法可以提高代码的可读性和维护性。

js怎么获取input的value

相关问答FAQs：