如何在 JavaScript 中获取文本框的值

在 JavaScript 中，如何获取输入框中的值是一个常见问题。本文将介绍三种方式来获取文本框的值。

1. 通过 ID 获取文本框的值

HTML 代码：

<input type="text" id="myInput">
<button onclick="getValue()">Get Value</button>

JavaScript 代码：

function getValue() {
  var input = document.getElementById("myInput");
  var value = input.value;
  alert(value);
}

当用户点击按钮时，getValue() 函数就会被触发，并通过 getElementById 方法获取文本框的 DOM 对象。随后，我们就可以利用 DOM 对象的 value 属性来获取文本框中的值。

2. 通过 Name 获取文本框的值

HTML 代码：

<input type="text" name="myInput">
<button onclick="getValue()">Get Value</button>

JavaScript 代码：

function getValue() {
  var input = document.getElementsByName("myInput")[0];
  var value = input.value;
  alert(value);
}

这种方法与第一种方法类似，我们也是通过 DOM 对象的 value 属性来获取文本框的值。但是我们这里是通过 getElementsByName 方法获取 DOM 对象。需要注意的是，getElementsByName 方法返回的是 NodeList 对象，因此我们需要指定索引来获取第一个元素。

3. 利用 jQuery 获取文本框的值

如果你正在使用 jQuery，那么获取文本框的值就变得十分简单了。

HTML 代码：

<input type="text" id="myInput">
<button id="myButton">Get Value</button>

jQuery 代码：

$("#myButton").click(function() {
  var value = $("#myInput").val();
  alert(value);
});

通过使用 $ 函数获取文本框和按钮的 jQuery 对象，并使用 val 方法获取文本框的值。当用户点击按钮时，就会触发 click 事件，从而执行预先定义好的函数。

以上三种方式都可以获取文本框的值，但是推荐优先使用纯 JavaScript 的方式。这不仅可以减少代码量，还可以避免不必要的依赖。