Get content from contenteditable div

Question

I display a popup for the user where it is required to write some text, and I want to check if he wrote something to display the message accordingly.

HTML

<div id="pop-div-id" class="cont-pop-div">
  <p id="content-id" contenteditable="true" class="cont-pop" placeholder="type explanation" spellcheck="false"></p>
</div>

Here is my JavaScript. I commented the use of textContent because I kept getting content has undefined value. The issue here is that this always alerts You have to write something and I am not sure what I am doing wrong that the value is not being updated even if I write something there.

let content =  document.getElementById("content-id");
// let contentValue = content.textContent;
// console.log(contentValue);

let innerText = content.innerText;

   if (innerText[innerText.length-1] === '\n') { 
      innerText = innerText.slice(0,-1);
      console.log(innerText);
   }            

button.addEventListener("click", function () {
  if (innerText.length === 0 || !!innerText.trim()) {
     alert("You have to write something ");
  } else {
     alert("Hello");
  }
});

I have seen this similar post - get the text content from a contenteditable div through javascript but apparently I am doing something wrong

Is this a typo on stack overflow only or in your code as well? document.getElementById("content--id"); ==> document.getElementById("content-id"); In js you use 'content--id' while html is saying 'content-id' — Stinodotbe, Oct 20 '20 at 20:16
@Stinodotbe good catch !, but unfortunately it is only stack overflow typo. I updated the post. — user12051965, Oct 20 '20 at 20:20
@user12051965 `innerText` only returns the text content. If you need the entire content, use `innerHTML` — Sagar V, Oct 21 '20 at 12:27

shreyasm-dev · Answer 1 · 2020-10-20T20:35:06.687

Use the innerHTML attribute

console.log(document.querySelector('div').innerHTML)

<div contenteditable>
  Hello World!
  <img src='http://via.placeholder.com/150'>
</div>

MDN reference for innerHTML

If you want to only get the text and not any HTML inside it, use innerText

console.log(document.querySelector('div').innerText) // Will not include <img src='http://via.placeholder.com/150'>

<div contenteditable>
  Hello World!
  <img src='http://via.placeholder.com/150'>
</div>

MDN reference for innerText

Get content from contenteditable div

1 Answers1