Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add linebreak to textContent or innerText only - in Chrome

This is a complicated one! Im working with contentEditable in Chrome and I'm experiencing a head melting problem. When I press the return key, Chrome inserts a new div into the innerHTML. This is fine and dandy. The problem is that the line break is nowhere to be found in the div's textContent. I really need to figure out a way to add the line break to the textContent in the same place as the div break in the innerHTML.

Any Ideas?

UPDATE:

I can use innerText but then line breaks that are there when the page loads are ignored. I need consistency across one of these methods. In other words, I need textContent to show newly inputted line breaks or innerText to show line breaks that existed on page load.

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>
like image 589
cronoklee Avatar asked Feb 17 '12 15:02

cronoklee


People also ask

What is the difference between textContent and innerText?

textContent gets the content of all elements, including <script> and <style> elements. In contrast, innerText only shows "human-readable" elements. textContent returns every element in the node. In contrast, innerText is aware of styling and won't return the text of "hidden" elements.

What is the difference between innerHTML and innerText and textContent?

textContents is all text contained by an element and all its children that are for formatting purposes only. innerText returns all text contained by an element and all its child elements. innerHtml returns all text, including html tags, that is contained by an element.

How do I add a line break in innerHTML?

If we want to add a new line to the Webpage by JavaScript only, then Adding HTML line break elements to your string can do the work for you. By using the break element in the string, we have to use the innerHTML property to render the string as HTML and not the text.

How to use HTML tag for line break instead of innertext?

HtmlGenericControl li; li = new HtmlGenericControl ("li"); li.InnerText = sdr.GetValue (0).ToString ()+" "+sdr.GetValue (1).ToString (); myList.Controls.Add (li); Use <br /> html tag for line break instead of and use innerHtml instead of innerText

How to add a new line to a text content?

For new line in textContent You have to use and, finally, I had to use css white-space: pre-line; (Text will wrap when necessary, and on line breaks) and everything goes fine. Or, You can use only white-space: pre; and then text will wrap only on line breaks (in this case ).

Is it possible to use the innertext property in chrome?

This is impossible to work with in a practical manner - and without the full support of the innerText property, we'll need to find another alternative. Be wary when using innerText, as it does not always return consistent results across browsers. I discovered that even certain versions of Chrome differ in implementation to each other.

How to force newline in innertext htmlgenericcontrol Li?

How will I be able to force a newline (or a line break) in innertext HtmlGenericControl li; li = new HtmlGenericControl ("li"); li.InnerText = sdr.GetValue (0).ToString ()+" "+sdr.GetValue (1).ToString (); myList.Controls.Add (li); Use <br /> html tag for line break instead of and use innerHtml instead of innerText


1 Answers

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

On page load, I use textContent which keeps line breaks intact. When the user starts typing, I use innerText which recognises inserted page breaks. A simple if statement will do the trick!

like image 71
cronoklee Avatar answered Oct 10 '22 17:10

cronoklee