資料結構
網路
關係資料庫管理系統 (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.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>
當指令碼執行時，它將在網頁上提供一個輸入欄位和一個點選按鈕。當用戶輸入文字並按下“點選”按鈕時，將觸發一個事件並在網頁瀏覽器上顯示文字框的值。
更新於：2023年1月18日
17K+ 瀏覽量
廣告