Get contenteditable element value - javascript

How do I get the value of a contenteditable element?
Right now I just use innerHTML to get the content of the element, which would result carriage returns as <br> tags, so I need to convert <br> tags to \n right now.
Is there another more proper way to get the value from a contenteditable element that I just don't know about?
Update:
In a textarea element when you get the value e.g. textarea.value the content is intact, like the carriage returns. Is there a similar way to get value from a contenteditable element or I am forced to replace values?
content.innerHTML.replace(/<br\s*[\/]?>/gi, "\n")
element.textContent only gets the text, carriage returns not included. So this does not solve my problem.

If you're looking to let users edit text the only clean solution is to go with a text area as you figured out yourself.
If for some reason you can't or you don't wanna use a textarea you have write your own bit of code that will convert those <br> into carriage returns. There is no automatic way of doing this because there could be all sorts of markup in there.

Related

Contenteditable div returns <br> when empty on IE

I am trying to get innerHTML of contenteditable field, and relying on that decide save it or not.
I have markup like this
<div class="users-overlay" contenteditable></div>
so when I am using document.querySelector('.users-overlay').innerHTML it returns <br>. This behaviour appears only on IE/Edge. I need to get rid of this somehow. Because even when I write document.querySelector('.users-overlay').innerHTML = '' it is still here. Thanks in advance.

Javascript - getting the exact value of a textarea

I need to get the exact value of a textarea field. There are many topics, but none of them meet my needs.
Javascript transforms the html characters.
console.log(document.getElementById('t1').value);
// display: a'b => OK
console.log(document.getElementById('t2').value);
// display: a'b => KO I need to get a'b
<textarea id="t1">a'b</textarea>
<textarea id="t2">a'b</textarea>
I must imperatively recover the exact content of the textarea (and not re-encode the content).
Do you have a solution for this issue?
Not JavaScript is transforming anything when reading the textarea's value, but your browser is rendering the entities as their corresponding characters. So, once the page is rendered, there's no entity inside the textarea anymore, it's just the text as the end user would see it. Therefore, neither .value nor .innerHTML will be able to retrieve the entity.
If what you're trying to achieve is displaying entities inside a textarea, you'll have to double-encode them as a&#039;b for example, by using the entity & for the ampersand.

How to do same as backspace when using execCommand() with editable iframe?

I am using execCommand with javascript to insert text into editable iframes like this:
element.execCommand("insertHTML",false,"some text");
Anyone know how to insert that text instead of the first character to the left of the cursor? So the same effect as pressing a backspace before doing the above?
It seems that there's no easy way to send keystrokes to editable iframe, so you'll probably need to find some sort of workaround. Easiest way to do that would be to get the contents from iframe, manipulate them and then put them back to iframe.
E.g.:
Select all text in iframe with
var selection = element.execCommand("selectAll");
to remove last character - slice selection
selection = selection.baseNode.data.slice(0, -1)
delete all content
element.execCommand("Delete")
append sliced selection + your new text
element.execCommand("insertHTML",false,selection);
element.execCommand("insertHTML",false,"some text");
References:
http://msdn.microsoft.com/en-us/library/ie/ms533049(v=vs.85).aspx
https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla
P.S. I'm note very familiar with editable iframe or selection objects, so if you have any html of special characters in your text it might be much more complicated than this. Also you might need to tweak it for different browsers.

jquery/javascript maintain linebreak when copying text

Suppose I have
<input type="hidden" id="in1">
...
<p id="editable_p"></p>
<script>
$('#some_button').click( function() {
$('#in1').val($('#editable_p').text());
});
</script>
Clearly, my intention is to set the value of the hidden field to be the content of the <p> tag. This works, however it does not maintain line breaks, which is important for me. Is there a basic library function that will copy the value of the editable paragraph that maintains the linebreaks, or is there some kind of extended hack that must be performed to get this to work as I intend?
Thanks much in advance.
You may find there are a number of text nodes in your #editable_p.p and calling text() as per a lot of XML type environments, will just concatenate the strings from the text nodes found in the descendant tree, potentially losing structure. This operation can do weird stuff to line breaks and other whitespace.
To avoid this, iterate over the actual text nodes, and concatenate the strings yourself, adding \n end of lines as necessary. Assuming you have succeeded in this and have the string with line breaks, I think talereader could be correct that a textarea or similar may be needed to represent the resulting string, and submit it faithfully to a server.
Selecting text nodes with JQuery is already outlined in
How do I select text nodes with jQuery?

"<" sign not showing in javascript?

I have a div-element that I want to show the symbol '<'.
div-element.innerHMTL = '<';
The string actually do not appears, I think the problem lies in that the browser thinks that it is a beginning of a tag element
Anyone seen this problem before?
You should use an HTML entity - <. This will be displayed by the browser as <, rather than being interpreted as the start of an HTML tag.
Here's a handy list of common HTML entities: http://www.danshort.com/HTMLentities/
divElement.innerHTML = '<';
innerHTML sets does not encode and can be used to set html elements.
innerText sets encodes and cannot be used to set html elements.
You should use innerText when you just want to set text or you should encode the text when you want to mix html with text
This might be useful link which shows all symbols
http://www.w3schools.com/HTML/html_entities.asp

Categories