Add linebreak only in textContent or innerText - in Chrome

Question

It's a difficult question! Im working with contentEditable in Chrome, and I ran into the problem of swimming the head. When I press the return key, Chrome inserts a new div into innerHTML. It is beautiful and dandy. The problem is that line breaks are not found anywhere in the textContent div. I really need to figure out a way to add a line break in a textContent in the same place as a div break in innerHTML.

Any ideas?

UPDATE:

I can use innerText, but then line breaks that are there when the pages load are ignored. I need consistency in one of these methods. In other words, I need textContent to show the new line breaks entered or innerText to show the line breaks that existed when the page loaded.

Here's an updated demo:

function checkit() { var c1 = document.getElementById('c1') alert("TEXTCONTENT:\n" + c1.textContent + "\n\nINNERTEXT:\n" + c1.innerText + "\n\nINNERHTML:\n" + c1.innerHTML) } 

 div {padding: 20px; border-bottom: 1px solid #CCC;} 

 <div><a href="#" onclick="checkit()">check it</a></div> <div contentEditable="true" id="c1">click inside this <b>div</b>, press return and then press <b>check it</b> above</div> 

Answer 1

I solved this by loading a different variable for each situation:

When loading the page, I use textContent , which saves line breaks. When the user starts typing, I use innerText , which recognizes inserted page breaks. A simple if statement will do the trick!

Answer 2

This is because textContent does not know the style. As a result, for example, it displays hidden content.

Change c1.textContent to c1.innerText and display the line break.