Tengo este código que debería cambiar el contenido de la posición de una tabla cuando cambias el contenido de nameDiv, que es var nameDiv = document.createElement('div'); ( nameDiv.contentEditable = "true"; ) y tiene algo de texto
nameDiv.onclick = event => { allSectionsArray[sectionNumber][2] = event.value; }Lo que sucede aquí es básicamente: se actualiza en el momento en que hago clic en el div y no después de ingresar un texto.
Lo que quiero es: guardar los cambios después de ingresar el texto. ¿Hay algún sustituto de onclick o cualquier otro método que pueda lograr esto?
Para contenteditable , puede usar el evento de input :
El evento de entrada se activa cuando se cambia el valor de un elemento de entrada.
El evento de change no es compatible con contenteditable , pero puede usar el evento de blur en su lugar, que
se dispara cuando un elemento ha perdido el foco
const example = document.querySelector("#example"); example.addEventListener("blur", ()=>{ console.log(`Value is: ${example.textContent}`); }); #example { border: solid 1px #000; padding: 5px; } <div id="example" contenteditable></div>También puede consultar la lista completa de eventos aquí .
Encuentre a continuación una muestra de cómo funcionan los diferentes eventos con elementos contenteditable . Probablemente necesitará un controlador de eventos de blur para obtener el valor cuando el usuario termine de escribir.
const code = document.querySelector('pre'); const object = { valueOnclick: '', valueOninput: '', valueOnblur: '' }; document.querySelector('div').addEventListener('input', e => { object.valueOninput = e.target.textContent; code.innerHTML = JSON.stringify(object, null, 4); }); document.querySelector('div').addEventListener('click', e => { object.valueOnclick = e.target.textContent; code.innerHTML = JSON.stringify(object, null, 4); }); document.querySelector('div').addEventListener('blur', e => { object.valueOnblur = e.target.textContent; code.innerHTML = JSON.stringify(object, null, 4); }); <div contenteditable>Some content</div> <pre></pre>