编辑动态添加的输入,同时不填充该数组中的其他输入,可以通过以下步骤实现:
以下是一个示例代码,演示如何实现上述步骤:
<!DOCTYPE html>
<html>
<head>
<title>动态添加输入</title>
</head>
<body>
<div id="inputs-container"></div>
<button onclick="addInput()">添加输入</button>
<script>
var inputsData = [];
function addInput() {
var input = document.createElement("input");
var uniqueId = generateUniqueId(); // 生成唯一标识符
input.id = uniqueId;
input.type = "text";
document.getElementById("inputs-container").appendChild(input);
input.addEventListener("input", function() {
updateInputData(uniqueId, input.value);
});
}
function updateInputData(id, value) {
var index = inputsData.findIndex(function(input) {
return input.id === id;
});
if (index !== -1) {
inputsData[index].value = value;
} else {
inputsData.push({ id: id, value: value });
}
}
function generateUniqueId() {
return "input-" + Math.random().toString(36).substr(2, 9);
}
</script>
</body>
</html>
在上述示例中,点击"添加输入"按钮会动态创建一个输入框,并将其添加到inputs-container
容器中。每个输入框都有一个唯一的ID,并且在用户输入时会触发input
事件,将输入的值更新到inputsData
数组中。如果需要编辑某个输入框,可以根据其ID在数组中找到对应的值,并将其填充到输入框中。同时,该示例没有涉及云计算相关的内容,因此无需提供腾讯云相关产品链接。
领取专属 10元无门槛券
手把手带您无忧上云