如何在 JavaScript 中显示文本框的值?
javascriptweb developmentfront end technology
在本文中，我们将学习"如何在 JavaScript 中显示文本框的值"。
JavaScript 允许您通过两个简单的步骤创建文本框:为了构造 <input> 元素，您必须首先利用 document 对象的 createElement("input") 方法。
下一步是使用元素更改新生成的 <input> 的类型属性元素为"text"。文本包含在文本框中，可以更改和移动文本。它们有助于为文本添加下划线或修饰文本。
示例
在下面的示例中，我们将运行脚本以及带有 OnClick 事件处理程序的按钮。按下单击按钮时，将调用 repeatvalue() JavaScript 函数。
<!DOCTYPE html>
<html>
<body>
<input type="text" id="Username"/>
<input type="button" id = "tutorial" value="Click" onclick = "repeatvalue()" />
<hr />
<label id = "label"></label>
<script>
function repeatvalue() {
var txtName = document.getElementById("Username");
var lblName = document.getElementById("label");
lblName.innerHTML = txtName.value;
}
</script>
</body>
</html>
当脚本执行时，它将生成一个输出，该输出由网页上的输入字段和点击按钮组成。当用户输入文本并按下点击按钮时，事件将被触发并由用户单独显示输入的值。
示例
考虑以下示例，我们正在运行脚本来显示文本框值。
<!DOCTYPE html>
<html>
<body>
<label>Enter Password: </label><br>
<input type= password id="password" onchange="repeatvalue()"><br>
<script>
function repeatvalue() {
document.getElementById("tutorial").innerHTML =
document.getElementById("password").value;
}
</script>
<p id="tutorial"></p>
</body>
</html>
运行上述脚本后，网络浏览器会为用户显示一个输入字段。当用户在其中输入密码类型的文本时，它会在用户完成输入后立即在文本框中显示星星，当用户单击"输入"时，实际文本将显示在网页上。
示例
执行以下代码以观察"如何使用 JavaScript 在网页上显示文本框值"。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jqueryui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
Enter your Name:
<input type="text" placeholder="enter your name" id="txtInputData">
<button onclick="displayName()">Click Me</button>
<p id="show_name"></p>
<script>
function displayName() {
var originalName = document.getElementById("txtInputData").value;
document.getElementById("show_name").innerHTML = "Your Name is :" + originalName;
}
</script>
</body>
</html>
当脚本执行时，它将在网页上提供一个输入字段以及一个点击按钮。当用户输入文本并按下"点击"按钮时，将触发事件并在 Web 浏览器上显示文本框值。
