Estoy tratando de hacer una entrada, tiene su valor desde el principio.
Luego, cuando el usuario haga doble clic en un tramo, el cursor debe estar en el campo de entrada y el usuario debería poder editarlo.
Una vez que la edición está lista, debe presionar el botón Guardar para guardarla, no solo hacer clic fuera del campo de entrada (que es predeterminado)
El segundo botón simplemente eliminará, restablecerá la cadena de nombre y luego, una vez más, cuando presione guardar, guardará la cadena vacía.
Todo eso dependerá de qué tramo esté marcando el usuario, por lo que se debe acceder a la entrada respectiva de un tramo respectivo para editar.
He hecho algo como esto por ahora ..
Pero está lejos de estar listo. Agradecería sus ideas.
Necesito hacerlo usando Vanilla 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>Para poder editar el campo de entrada correcto, no debe trabajar con el ID del primer campo de entrada en el ciclo. Aquí hay una forma de seleccionar el campo de entrada correcto a través del elemento de intervalo al hacer doble clic:
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(); } }No estoy muy seguro de lo que se supone que debe hacer el botón Guardar. En este momento, simplemente deshabilita el campo de entrada nuevamente, manteniendo el nuevo valor.