js 输入框

作者：若此生已赞。发布日期:2026-06-02 浏览:97

<!DOCTYPE html>
<html>
<head>
    <title>JS 输入框示例</title>
</head>
<body>
    <!-- 创建一个输入框 -->
    <input type="text" id="myInput" placeholder="请输入内容">
    <button onclick="showInputValue()">显示输入内容</button>
    <p id="output"></p>

    <script>
        // 定义一个函数，用于获取输入框的值并显示在页面上
        function showInputValue() {
            // 获取输入框元素
            var input = document.getElementById("myInput");
            // 获取输入框中的值
            var inputValue = input.value;
            // 将输入框的值显示在页面上的指定位置
            document.getElementById("output").innerText = "你输入的内容是: " + inputValue;
        }
    </script>
</body>
</html>

解释说明：

HTML 部分:
- 使用 <input> 标签创建了一个文本输入框，并设置了 id 为 myInput，方便通过 JavaScript 获取该元素。
- 添加了一个按钮，点击时会触发 showInputValue() 函数。
- 使用 <p> 标签创建了一个段落，用于显示输入框中的内容。
JavaScript 部分:
- 定义了 showInputValue() 函数，当按钮被点击时会执行该函数。
- 使用 document.getElementById() 方法获取输入框和输出段落的 DOM 元素。
- 使用 input.value 获取输入框中的文本内容。
- 最后将获取到的内容显示在页面上的指定位置。

上一篇：js checkbox

下一篇：js input只能输入数字