JS获取输入框的值|极客笔记

JS获取输入框的值

在前端开发中，经常会遇到需要通过表单输入框获取用户输入的需求。而JavaScript是一种用于实现客户端交互的脚本语言，通过它可以轻松地获取输入框的值，并进行相应的操作。本文将详细介绍如何使用JavaScript获取输入框的值。

1. 获取input输入框的值

在HTML中，我们通常使用<input>标签来创建输入框。要获取这个输入框的值，我们首先需要选中这个输入框的元素，然后通过JavaScript获取其值。以下是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>获取输入框的值</title>
</head>
<body>
    <input type="text" id="myInput">
    <button onclick="getValue()">获取值</button>
    <script>
        function getValue() {
            var inputValue = document.getElementById('myInput').value;
            alert('输入框的值为：' + inputValue);
        }
    </script>
</body>
</html>

在上面的代码中，我们创建了一个<input>输入框，并为其添加了一个id为”myInput”的属性。然后通过JavaScript的document.getElementById()方法选中这个输入框，并使用.value属性获取其值。点击按钮后，会弹出一个对话框显示输入框的值。

2. 获取textarea输入框的值

除了<input>输入框，我们还经常使用<textarea>标签创建多行文本输入框。获取<textarea>输入框的值与获取<input>输入框的值类似，也是通过.value属性来实现。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>获取文本框的值</title>
</head>
<body>
    <textarea id="myTextarea"></textarea>
    <button onclick="getValue()">获取值</button>
    <script>
        function getValue() {
            var textareaValue = document.getElementById('myTextarea').value;
            alert('文本框的值为：' + textareaValue);
        }
    </script>
</body>
</html>

在上面的示例中，我们创建了一个<textarea>输入框，并为其添加了id为”myTextarea”的属性。通过document.getElementById()方法选中这个输入框，再使用.value属性获取其值。点击按钮后，会弹出一个对话框显示文本框的值。

3. 获取select选择框的值

除了输入框和文本框，我们还常常使用<select>标签创建下拉选择框。获取<select>选择框的值也是通过.selected.value属性来实现。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>获取选择框的值</title>
</head>
<body>
    <select id="mySelect">
        <option value="1">选项1</option>
        <option value="2">选项2</option>
        <option value="3">选项3</option>
    </select>
    <button onclick="getValue()">获取值</button>
    <script>
        function getValue() {
            var selectValue = document.getElementById('mySelect').value;
            alert('选择框的值为：' + selectValue);
        }
    </script>
</body>
</html>

在上面的示例中，我们创建了一个<select>选择框，并为其添加了id为”mySelect”的属性。通过document.getElementById()方法选中这个选择框，再使用.value属性获取其值。点击按钮后，会弹出一个对话框显示选择框的值。

4. 实时获取输入框的值

有时候我们需要实时获取输入框的值，比如在用户输入时即时显示字数统计。这可以通过给输入框绑定input事件来实现。以下是一个实时获取输入框字数的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>实时获取输入框的值</title>
</head>
<body>
    <input type="text" id="myInput" oninput="getCharacterCount()">
    <p id="charCount">字符数：0</p>
    <script>
        function getCharacterCount() {
            var input = document.getElementById('myInput').value;
            document.getElementById('charCount').innerHTML = '字符数：' + input.length;
        }
    </script>
</body>
</html>

在上面的示例中，我们给<input>输入框绑定了oninput事件，当用户输入时触发getCharacterCount()函数。在这个函数中，我们通过.value属性获取输入框的值，并实时更新页面上显示的字符数统计。