How to change html element after text has been edited

user_14405992 0
Viewed 61

I have this code that should change the contents of a table position when you change the contents of nameDiv which is var nameDiv = document.createElement('div'); (nameDiv.contentEditable = "true";) and it has some text

 nameDiv.onclick = event => {
            allSectionsArray[sectionNumber][2] = event.value;
 }

What happens here is basically: it updates the second I click on the div and not after some text is entered.

What I want is: to save changes after entering the text. Is there any substitute of onclick or any other method that I can achieve this?

listener events html javascript
2 Answers

For contenteditable, you can use the input event:

The input event fires when the value of an input element has been changed.

The change event isn't supported for contenteditable, but you can use the blur event instead which

fires when an element has lost focus

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>

You can also browse the full list of events here.

user_26910580

Find below a sample how different events work with contenteditable elements. You will probably need blur event handler to get the value when user is done typing.

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>

user_54529650
Related