根据用户输入编辑特定的输入按钮，并将其保存为一个单独的按钮

Question

我想做一个输入，它从一开始就有它的值。
然后，当用户双击span时，光标需要在输入字段中，并且用户应该能够编辑它。
一旦编辑准备好了，他需要按下保存按钮来保存它，而不仅仅是在输入字段外点击(这是默认的)

第二个按钮将删除，重置名称字符串，然后再次按下保存，它将保存空字符串。

所有这些都取决于用户阻塞的是哪个span，因此必须访问相应span的相应输入才能进行编辑。

我已经做过这样的事情了。
但还远没有准备好。谢谢你的建议。
我需要使用普通JavaScript

var numberOfbuttons = document.querySelectorAll(".name").length;
for (i = 0; i < numberOfbuttons; ++i) {

document.querySelectorAll('.name')[i].ondblclick = function() {
document.getElementById('in1').disabled = false;    
document.getElementById('in1').value = 'hahmmm';
};

}

<span id="spn1" class="name">
<input id="in1" type="text" disabled="true" value="Homer Simpson">
<div class="namefunc">
<button class="check">save</button>
<button class="close">delete</button>
</div>
</span>
<span id="spn2" class="name">
<input id="in2" type="text" disabled="true" value="Marge Simpson">
<div class="namefunc">
<button class="check">save</button>
<button class="close">delete</button>
</div>
</span>
<span id="spn3" class="name">
<input id="in3" type="text" disabled="true" value="Bart Simpson">
<div class="namefunc">
<button class="check">save</button>
<button class="close">delete</button>
</div>
</span>

Answer 1

为了使正确的输入字段可编辑，您不能使用循环中第一个输入字段的ID。下面是通过双击span元素选择正确输入字段的方法:

document.querySelectorAll(".name").forEach(span => {
span.ondblclick = function() {
let input = span.querySelector("input");
input.disabled = false;
input.value = "hahmmm";
input.focus();
span.querySelector("button.check").onclick = function() {
input.disabled = true;
}
span.querySelector("button.close").onclick = function() {
if (input.disabled == false) {
input.value = "";
input.focus();
}
}
}
});
window.onclick = function() {
let active_input = document.querySelector("input:not([disabled])");
if (active_input) {
active_input.focus();
}
}

我不太确定保存按钮应该做什么。现在它只是再次禁用输入字段，保留新值。