js 获取input的value值三种方式|极客笔记

js 获取input的value值三种方式

在前端开发中，经常会涉及到获取用户输入的数据。而获取input标签的value值是一种常见的操作。本文将介绍如何使用JavaScript获取input标签的value值，包括三种不同的方式。

1. 使用document.getElementById()

这是最常见的一种方式，通过document.getElementById()方法获取input标签的元素，然后获取其value属性值。

<!DOCTYPE html>
<html>
<body>

<input type="text" id="myInput">

<button onclick="getValue()">获取值</button>

<script>
function getValue() {
  var input = document.getElementById("myInput");
  var value = input.value;
  console.log(value);
}
</script>

</body>
</html>

在上面的示例中，我们首先使用document.getElementById()方法获取id为myInput的input标签元素，然后通过value属性获取其值。当点击按钮时，会在控制台输出input标签的值。

2. 使用document.querySelector()

另一种常见的方式是使用document.querySelector()方法来选择input标签，然后获取其value值。

<!DOCTYPE html>
<html>
<body>

<input type="text" id="myInput">

<button onclick="getValue()">获取值</button>

<script>
function getValue() {
  var input = document.querySelector("#myInput");
  var value = input.value;
  console.log(value);
}
</script>

</body>
</html>

在这个示例中，我们通过document.querySelector()方法选择id为myInput的input标签元素，然后同样通过value属性获取其值。当点击按钮时，同样会在控制台输出input标签的值。

3. 使用事件监听器

除了上面两种方法，我们还可以使用事件监听器来实时获取input标签的值。这种方式可以在用户不断输入时实时获取值。

<!DOCTYPE html>
<html>
<body>

<input type="text" id="myInput">

<script>
document.getElementById("myInput").addEventListener("input", function() {
  var value = this.value;
  console.log(value);
});
</script>

</body>
</html>

在这个示例中，我们给id为myInput的input标签元素添加了一个input事件监听器。当用户输入时，会实时获取其值并输出到控制台。