I have to use textarea.value text but it does not preserve line breaks as input by the user. I don't want to use replace(/\n\r?/g, '<br />') trick as it is useful only to render text as html.
Is there any other way to access textarea.value as it is?
In this example http://jsfiddle.net/jfriend00/Gy7W3/, the text area is returning a linefeed character on the .value property everywhere the user enters a line break so it seems to already do what you want.
Related
I need to preserve the line breaks of an text input inserted in my javascript front-end page, after being pasted into a Textarea input
this is what happens if I debug the value contained in the onSumbit() method of the textarea
I need to have CRLF but the image clearly shows that the CarriageReturn (CR) have been removed from the text inserted and only LineFeed (LF) is still present.
I've tried to add the css property white-space: pre-wrap to the textarea but that didn't work.
How can I preserve the CRLF of the text?
thanks
Where are you trying to encode the text to base64? If you are doing it in the frontend using Javascript to take the value, you should know that the value contains only LF. If you are doing it in the backend after a body submit by POST then yes, the value contains CRLF and something is wrong.
But my guess from your issue description is that you are in the first -frontend- case, so it's not the encoding to blame.
So, when you are getting the value from the textarea, you can do something like
value.replace(/\r\n/g, "\n").replace(/\n/g, "\r\n")
to always get CRLF.
I have a narrow button that contains an image and label text. The state of the button changes to one of several values which are stored as text in an array and then changed out with textContent.
One of the values forces a line break in the label text. I would like to reserve the "blank line" below my label so that layout isn't affected every time the label breaks to two lines of text. To accomplish this, I'm trying to append a newline to every single-line value. For layout reasons, I can't simply pad the container — I need it to match the height of a line of formatted text.
Is there any way to put a newline into a text array value? I've tried adding a CR to my text both within the array and prior to the array as a variable using:
Labelname + \n
Labelname\n
Labelname<br /> (HTML, I know)
var label = 'Labelname' + String.fromCharCode(13)
Nothing seems to make the newline "stick," and the console reveals the value "Labelname" without the newline.
HTML generally ignores whitespace (including newline characters). To have it rendered, you need to use an element that doesn't ignore whitespace (like <pre>), or opt in to <pre>-style whitespace handling via CSS with white-space: pre-wrap.
I ended up using innerHTML to put formatted text into the element. I was resistant to using it for various reasons, but it provided a straightforward solution to this problem.
I have a textarea that will populate another section with what the user inputs and my code works fine as long as I dont type anything starting with "<". Whenever I have a string like "<anything else can follow" that starts with "<", it wont set the innerhtml.
var text = "<i wont print"
text = "i will print!"
trans_txt.innerHTML = text;
Is "<" some kind of override character for innerhtml? I was wondering if anyone knew what was happening and if there is a way I could change the text var into purely string without having to worry about my string not showing up.
edit: I realized this because the default textarea message is "<text area"
<i followed by a space is HTML syntax for "Start an <i> (idiomatic/italic) tag" Since the parser doesn't see the end of the tag's definition (that is, a >), everything between the <i and the end is considered an error and dropped.
If you want to insert plain text only, use textContent instead:
var text = "<i wont print"
document.body.textContent = text;
textContent is also faster and safer. Only use innerHTML when deliberately inserting HTML markup.
Don't use innerText - best to prefer textContent instead in almost all situations.
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.
I am creating comments from user input and rendering them using Mustache.js after a user clicks 'submit'. I realize I can replace user input line breaks (\n) with <br/> to render as HTML breaks, such as
myString.replace(/\n/g, '<br />');
and I realize I can make Mustache not escape HTML by using triple brackets
{{{myString}}}
However, I would like to escape all user HTML as Mustache would typically do with double braces {{ ... }}, with the exception of allowing line breaks with <br/>
What is the best way to do this? I can replace the line breaks after it has been rendered, but that seems like a very inefficient solution, and I'm thinking there has to be a better way.
Option 1 - Use a pre tag:
It's actually best (or efficient) that you wrap text in a <pre></pre> tag, which will preserve the white space in the text.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre
And enable word-wrap
How do I wrap text in a pre tag?
- http://jsfiddle.net/X5ZY7/
Option 2 - Split your string into lines, and use a mustache each:
comment = userComment.split("\n")
{{#comment}}
{{comment}}<br/>
{{/comment}}
Option 3 - Manually escape your string using your favorite method before injecting the tags:
var div = document.createElement("div")
div.textContent = comment
comment = div.innerHTML.replace(/\n/g, "<br/>")
{{{comment}}}
If you're looking to add line breaks to a textarea you need to replace \n with