js 给文本框赋值|极客笔记

js 给文本框赋值

在前端开发中，经常会遇到需要使用 JavaScript 给文本框赋值的情况。这种操作可以通过原生的 JavaScript 代码来实现，下面将详细讲解如何使用 JavaScript 给文本框赋值，并给出相关的代码示例。

使用 `getElementById` 方法获取文本框元素

要给文本框赋值，首先需要获取文本框元素，一种常用的方法是使用 getElementById 方法通过文本框的 id 来获取文本框元素。假设我们有一个文本框的 id 为 txtInput，可以通过以下代码获取该文本框元素：

var txtInput = document.getElementById('txtInput');

使用 `value` 属性给文本框赋值

获取到文本框元素后，可以通过设置其 value 属性来给文本框赋值。例如，我们想要给上面获取到的文本框赋值为 “Hello, World!”，可以使用以下代码实现：

txtInput.value = "Hello, World!";

完整示例

下面给出一个完整的示例，演示如何在一个包含一个文本框的 HTML 页面中使用 JavaScript 给文本框赋值，并通过按钮点击事件来实现：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>给文本框赋值示例</title>
</head>
<body>
<input type="text" id="txtInput">
<button onclick="setValue()">给文本框赋值</button>

<script>
function setValue() {
  var txtInput = document.getElementById('txtInput');
  txtInput.value = "Hello, World!";
}
</script>
</body>
</html>

在这个示例中，当点击按钮 “给文本框赋值” 时，文本框的值将会被设置为 “Hello, World!”。