JS怎么给input赋值|极客笔记

JS怎么给input赋值

在使用JavaScript编写网页时，经常会遇到需要通过代码来修改页面上的输入框（input）的值的情况。这时，我们就需要掌握如何通过JavaScript代码来给input赋值。本文将详细介绍如何通过多种方法来实现这个目标。

1. 使用JavaScript原生方法

JavaScript提供了许多原生方法可以用来给input元素赋值。其中，最常用的是value属性。

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

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

上面的代码展示了一个简单的示例。当点击“Set Value”按钮时，会将id为“myInput”的input元素的值设置为“Hello, World!”。

2. 使用jQuery

如果你使用了jQuery库，可以通过它提供的方法来更方便地操作DOM元素。

<input type="text" id="myInput">
<button id="btn">Set Value</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
 $("#btn").click(function() {$ ("#myInput").val("Hello, World!");
});
</script>

在上面的示例中，我们使用了jQuery的val()方法来设置input元素的值。

3. 使用setAttribute方法

除了直接设置value属性之外，还可以使用setAttribute方法来给input元素设置值。

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

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

在这个示例中，我们通过setAttribute方法将id为“myInput”的input元素的值设置为“Hello, World!”。

4. 使用input.value属性

除了直接通过document.getElementById来获取元素并设置value属性之外，还可以直接通过input元素本身来获取和设置值。

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

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

在这个示例中，我们通过先获取input元素的引用，然后直接设置其value属性来给input元素赋值。

5. 使用template literals

使用ES6中的模板字面量（template literals）也可以给input元素赋值。

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

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

在这个示例中，我们使用模板字面量${}来将字符串赋值给input元素。

结语

在本文中，我们详细介绍了如何通过JavaScript来给input元素赋值。无论是使用JavaScript原生方法、jQuery、setAttribute方法，还是直接通过input.value属性或模板字面量，都能实现这个目标。根据实际情况选择合适的方法，灵活运用，将有助于提升网页开发效率和代码质量。