如何在 JavaScript 中動態產生輸入表單元素？
- Barbara Streisand原創
- 2024-10-28 06:38:02346瀏覽
動態建立輸入表單元素
本文深入研究了一個常見的程式設計挑戰：根據使用者輸入動態建立輸入表單元素。目標是使用 JavaScript 為初學者提供清晰、簡單的解決方案。
問題
網頁包含一個文字輸入字段，使用者可以在其中輸入數字。點擊相應的連結後，頁面應動態產生許多輸入字段，以便使用者提供附加資訊。使用者最多可以輸入 10 個值。
了解解決方案
-
擷取使用者輸入：
- onclick 事件處理程序應用於負責產生輸入欄位的連結。
- 在事件處理程序中，可以使用 document.getElementById() 檢索在文字輸入欄位中輸入的值。
-
建立容器：
- 容器元素，例如具有id 屬性的div（例如「container」），是必需的保存動態產生的輸入欄位。
-
動態產生元素：
- 使用 document.createElement(), new可以建立輸入元素。
- 應為每個輸入設定類型和名稱等屬性。
- appendChild() 用於將每個輸入元素附加到容器。
-
清除先前的元素：
- 為了防止重複，應在產生新元素之前刪除容器中的任何現有子元素。這可以使用 hasChildNodes() 和 removeChild() 來完成。
-
其他增強功能：
- 您可以新增元素例如換行符(document.createElement("br") ) 或文字節點(document.createTextNode()) 來改進佈局。
程式碼範例
以下程式碼片段示範了此解決方案的實作：
<html>
<head>
<script type='text/javascript'>
function addFields(){
// Get number of inputs
var number = document.getElementById("member").value;
// Get container
var container = document.getElementById("container");
// Clear container
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
// Generate inputs
for (i=0;i<number;i++){
// Text node
container.appendChild(document.createTextNode("Member " + (i+1)));
// Input element
var input = document.createElement("input");
input.type = "text";
input.name = "member" + i;
container.appendChild(input);
// Line break
container.appendChild(document.createElement("br"));
}
}
</script>
</head>
<body>
<input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
<a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
<div id="container"/>
</body>
</html>以上是如何在 JavaScript 中動態產生輸入表單元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn