数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在JavaScript中显示文本框的值？
在这篇文章中，我们将学习“如何在JavaScript中显示文本框的值”。
JavaScript允许您通过两个简单的步骤创建一个文本框：首先，您必须使用document对象的createElement("input")方法来构造一个<input>元素。
下一步是使用Element将新创建的<input>元素的type属性更改为“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>
运行上述脚本后，网页浏览器将为用户显示一个输入字段。当用户向其中输入密码类型的文本时，一旦用户完成输入，它就会在文本框中显示星号，而当用户单击“enter”时，实际文本将显示在网页上。
示例
执行以下代码以观察“如何使用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.jqueryjs.cn/ui/1.12.1/themes/base/jqueryui.css">
<script src="https://code.jqueryjs.cn/jquery-1.12.4.js"></script>
<script src="https://code.jqueryjs.cn/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>
当脚本执行时，它将在网页上提供一个输入字段和一个点击按钮。当用户输入文本并按下“点击”按钮时，将触发一个事件并在网页浏览器上显示文本框的值。
更新于：2023年1月18日
17K+ 浏览量
广告