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>
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.
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.
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.
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
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 ).
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 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
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With