【JS】使用js更改某個input框的id, name屬性值並增加 autocomplete = off，最後再次input 新增一個id, name不同的 input框
是的，可以使用 JavaScript 動態更改現有的 input 元素的 id、name 屬性值，並設置 autocomplete=”off”，最後再新增一個 id 和 name 不同的 input 元素。以下是具體的實現方式。
實現示例
假設 HTML 有一個現有的 input 框，其 id 和 name 為 originalInput，然後用 JavaScript 來更改屬性並新增另一個 input 框：
<!DOCTYPE html>
<html lang=”zh-TW”>
<head>
<meta charset=”UTF-8″>
<title>動態更改與新增 Input 示例</title>
<script>
function modifyAndAddInput() {
// 1. 獲取現有的 input 框
const originalInput = document.getElementById(“originalInput”);
if (originalInput) {
// 2. 更改 id 和 name 屬性
originalInput.id = “modifiedInput”;
originalInput.name = “modifiedName”;
// 3. 設置 autocomplete = “off”
originalInput.setAttribute(“autocomplete”, “off”);
// 4. 創建新的 input 元素
const newInput = document.createElement(“input”);
newInput.type = “text”;
newInput.id = “newInput”;
newInput.name = “newName”;
// 5. 將新的 input 元素添加到頁面上
originalInput.parentNode.insertBefore(newInput, originalInput.nextSibling);
}
}
</script>
</head>
<body>
<form>
<label for=”originalInput”>身份證字號：</label>
<input type=”text” id=”originalInput” name=”originalName”>
<button type=”button” onclick=”modifyAndAddInput()”>修改並新增 Input</button>
</form>
</body>
</html>
說明
1. 更改現有 input 的屬性：
• 使用 originalInput.id = “modifiedInput” 和 originalInput.name = “modifiedName” 改變 id 和 name 的值。
• 使用 originalInput.setAttribute(“autocomplete”, “off”) 關閉自動完成功能。
2. 新增新的 input 框：
• 使用 document.createElement(“input”) 創建一個新的 input 元素，然後設置其 type、id 和 name。
• 最後使用 insertBefore 方法將新的 input 元素插入到現有的 input 後面。
最終效果
• 點擊按鈕後，原有的 input 框的 id 和 name 會被更改，且自動完成功能被關閉。
• 一個新的 input 框會出現在原有的 input 框後，且具有不同的 id 和 name。
本文由 ChatGPT 生成
