JS给input赋值|极客笔记

JS给input赋值

在网页开发中，常常会涉及到使用JavaScript来操作页面元素。其中，给input赋值是一个常见的操作，可以通过JavaScript动态地改变input元素的值。本文将详细介绍如何使用JS给input赋值，并提供一些示例代码进行演示。

使用JavaScript给input赋值

在HTML中，input元素通常用于接收用户输入的内容，比如文本框、单选框等。通过JavaScript可以动态地改变input元素的值，从而实现一些交互效果或者数据展示需求。接下来我们将介绍几种常见的方法来给input赋值。

方法一：直接赋值

最简单的方法就是直接使用JavaScript来赋值给input元素。通过获取input元素的引用，然后使用value属性来设置其值。

<!DOCTYPE html>
<html>
<body>

<input type="text" id="myInput">
<button onclick="setValue()">Set Value</button>

<script>
function setValue() {
  document.getElementById("myInput").value = "Hello, World!";
}
</script>

</body>
</html>

在上面的示例中，点击按钮后会将文本框的值设置为”Hello, World!”。可以在浏览器中打开此页面，点击按钮即可看到效果。

方法二：通过事件监听

除了直接赋值外，我们还可以通过事件监听来动态地设置input的值。比如，可以监听input元素的focus事件，在用户输入时自动填充内容。

<!DOCTYPE html>
<html>
<body>

<input type="text" id="myInput">
<input type="button" value="Clear" onclick="clearValue()">

<script>
document.getElementById("myInput").addEventListener("focus", function() {
  this.value = "Type something here...";
});

function clearValue() {
  document.getElementById("myInput").value = "";
}
</script>

</body>
</html>

在上面的示例中，当用户点击input框时会自动填充”Type something here…”，点击Clear按钮可以清空input的值。

方法三：通过表单提交赋值

最常见的情况是在表单提交时给input赋值。可以在onsubmit事件中动态地改变input的值，以便通过表单提交。

<!DOCTYPE html>
<html>
<body>

<form onsubmit="submitForm()">
  <input type="text" id="myInput">
  <input type="submit" value="Submit">
</form>

<script>
function submitForm() {
  document.getElementById("myInput").value = "Form submitted!";
}
</script>

</body>
</html>

在上面的示例中，当用户点击Submit按钮提交表单时，会将input的值设置为”Form submitted!”。