📌  相关文章
📜  如何使用 JavaScript 获取文本输入字段的值？(1)

📅  最后修改于: 2023-12-03 15:08:20.662000             🧑  作者: Mango

如何使用 JavaScript 获取文本输入字段的值？

在 Web 开发中，获取文本输入字段的值是一个常见操作，可能会用于验证用户输入、进行数据处理等。本文将介绍如何使用 JavaScript 获取文本输入字段的值。

HTML 文本输入字段

在 HTML 中，可以使用 <input> 元素来创建文本输入字段。例如：

<label>用户名：<input type="text" id="username"></label>

上面的代码创建了一个文本输入字段，用户可以在页面中输入用户名。需要注意的是，id 属性用于标识这个输入字段，后面的 JavaScript 代码会用到这个标识。

JavaScript 获取文本输入字段的值

使用 JavaScript 获取文本输入字段的值，需要先获取这个输入字段的 DOM 对象，再从 DOM 对象中获取值。可以使用 document.getElementById() 方法获取 DOM 对象，例如：

var usernameInput = document.getElementById("username");

上面的代码获取了上面 HTML 代码中的用户名输入字段对应的 DOM 对象。

然后，可以使用 value 属性从 DOM 对象中获取输入字段的值，例如：

var username = usernameInput.value;

上面的代码获取了用户名输入字段的值，并把它存储在 username 变量中。

完整代码示例

下面是一个完整的代码示例，展示了如何获取文本输入字段的值：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>获取输入字段的值</title>
  </head>
  <body>
    <label>用户名：<input type="text" id="username"></label>
    <button id="submitBtn">提交</button>
    <script>
      var usernameInput = document.getElementById("username");
      var submitBtn = document.getElementById("submitBtn");
      submitBtn.addEventListener("click", function() {
        var username = usernameInput.value;
        alert("你输入的用户名是：" + username);
      });
    </script>
  </body>
</html>

上面的代码包含了一个用户名输入字段和一个提交按钮。当用户点击提交按钮时，代码会从输入字段中获取用户名并弹出一个提示框。