How to style contents of textarea field with CSS - html

Is it possible to style the contents of a textarea with CSS? I need to at the very least, insert more space after line breaks.
I want to basically have a new paragraph of text start within the textarea after every carriage return or line break.

You can't style the content of a textarea. All you can do is insert more whitespace manually.
One approach is to replace single carriage returns with double ones

This can be done with either Javascript or PHP...
JS: str.replace("\r\n", "<br />");
http://www.w3schools.com/jsref/jsref_replace.asp
PHP: str_replace("\r\n", "<br />", "whatyouaresearching", "number of replacements you want to make")
http://php.net/manual/en/function.str-replace.php
These are "String Replace" functions. So essentially what we are doing is searching a given string for a certain value and replacing it with another value.
Edit: Looks like I may have incorrectly assumed that the text area would interpret correctly. OP, have you tried yet? If that doesn't work, then try using the HTML Entity Code as the replace value:
http://www.w3schools.com/tags/ref_ascii.asp

Related

Why does the browser automatically unescape html tag attribute values?

Below I have an HTML tag, and use JavaScript to extract the value of the widget attribute. This code will alert <test> instead of <test>, so the browser automatically unescapes attribute values:
alert(document.getElementById("hau").attributes[1].value)
<div id="hau" widget="<test>"></div>
My questions are:
Can this behavior be prevented in any way, besides doing a double escape of the attribute contents? (It would look like this: &lt;test&gt;)
Does anyone know why the browser behaves like this? Is there any place in the HTML specs that this behavior is mentioned explicitly?
1) It can be done without doing a double escape
Looks like yours is closer to htmlEncode().
If you don't mind using jQuery
alert(htmlEncode($('#hau').attr('widget')))
function htmlEncode(value){
//create a in-memory div, set it's inner text(which jQuery automatically encodes)
//then grab the encoded contents back out. The div never exists on the page.
return $('<div/>').text(value).html();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hau" widget="<test>"></div>
If you're interested in a pure vanilla js solution
alert(htmlEncode(document.getElementById("hau").attributes[1].value))
function htmlEncode( html ) {
return document.createElement( 'a' ).appendChild(
document.createTextNode( html ) ).parentNode.innerHTML;
};
<div id="hau" widget="<test>"></div>
2) Why does the browser behave like this?
Only because of this behaviour, we are able to do a few specific things, such as including quotes inside of a pre-filled input field as shown below, which would not have been possible if the only way to insert " is by adding itself which again would require escaping with another char like \
<input type='text' value=""You &apos;should&apos; see the double quotes here"" />
The browser unescapes the attribute value as soon as it parses the document (mentioned here). One of the reasons might be that it would otherwise be impossible to include, for example, double quotes in your attribute value (well, technically it would if you put the value in single quotes instead, but then you wouldn't be able to include single quotes in the value).
That said, the behavior cannot be prevented, although if you really must use the value with the HTML entities being part of it, you could simply turn your special characters back into the codes (I recommend Underscore's escape for such task).

Show the code (i.e "&entity_name;"), not the corresponding character

If I write in a HTML file the browser automatically translates it to its corresponding character, in this case a space.
How can I escape from this phase? I mean, if I would like to print just the code (i.e. ) how can I prevent the browser from doing that?
You can't stop the browser from treating HTML as HTML.
If you want to include a & as data instead of as the start of a character reference, then use the character reference for it:
&nbsp;
For this you will need JQuery.
Try .text() method. http://api.jquery.com/text/
Get the body content an then replace it with text.
Means: $('body').text($('body').html());.
This will give you an output of your html in plain Text. Actually you can do this with other Elements as well. Replace the Word body with the element, class or id you need.

How can i convert/replace every newline to '<br/>'?

set tabstop=4
set shiftwidth=4
set nu
set ai
syntax on
filetype plugin indent on
I tried this, content.gsub("\r\n","<br/>") but when I click the view/show button to see the contents of these line, I get the output/result=>
set tabstop=4<br/> set shiftwidth=4<br/> set nu<br/> set ai<br/> syntax on<br/> filetype plugin indent on
But I tried to get those lines as a seperate lines. But all become as a single line. Why?
How can I make all those lines with a html break (<br/>) ?
I tried this, that didn't work.
#addpost = Post.new params[:data]
#temptest = #addpost.content.html_safe
#addpost.content = #temptest
#logger.debug(#addpost)
#addpost.save
Also tried without saving into database. Tried only in view layer,<%= t.content.html_safe %> That didn't work too.
Got this from page source
vimrc file <br/>
2011-12-06<br/><br/>
set tabstop=4<br/><br/>set shiftwidth=4<br/><br/>set nu<br/><br/>set ai<br/><br/>syntax on<br/><br/>filetype plugin indent on<br/>
Edit
Delete
<br/><br/>
An alternative to convert every new lines to html tags <br> would be to use css to display the content as it was given :
.wrapped-text {
white-space: pre-wrap;
}
This will wrap the content on a new line, without altering its current form.
You need to use html_safe if you want to render embedded HTML:
<%= #the_string.html_safe %>
If it might be nil, raw(#the_string) won't throw an exception. I'm a bit ambivalent about raw; I almost never try to display a string that might be nil.
With Ruby On Rails 4.0.1 comes the simple_format from TextHelper. It will handle more tags than the OP requested, but will filter malicious tags from the content (sanitize).
simple_format(t.content)
Reference : http://api.rubyonrails.org/classes/ActionView/Helpers/TextHelper.html
http://www.ruby-doc.org/core-1.9.3/String.html
as it says there gsub expects regex and replacement
since "\n\r" is a string you can see in the docs:
if given as a String, any regular expression metacharacters it contains will be interpreted literally, e.g. '\d' will match a backlash followed by ā€˜dā€™, instead of a digit.
so you are trying to match "\n\r", you probably want a character class containing \n or \r -[\n\r]
a = <<-EOL
set tabstop=4
set shiftwidth=4
set nu
set ai
syntax on
filetype plugin indent on
EOL
print a.gsub(/[\n\r]/,"<br/>\n");
I'm not sure I exactly follow the question - are you seeing the output as e.g. preformatted text, or does the source HTML have those tags? If the source HTML has those tags, they should appear on new lines, even if they aren't on line breaks in the source, right?
Anyway, I'm guessing you're dealing with automatic string escaping. Check out this other Stack Overflow question
Also, this: Katz talking about this feature

What does Linq replace a new line with when updating?

I have always used Replace(myString, vbCrLf, "<br/>") to show line breaks when outting something to a page from the database (retaining line breaks). I am now using a DetailsView that has a textarea as one of the fields and uses a LinqDataSource as its datasource. I want to allow users to type line breaks in the textarea and display them on a page (replaced with <br/>'s to show breaks in the HTML). Linq seems to be replacing the line breaks with something else that is now causing the Replace statement to not find the breaks, therefor not inserting the html <br/>. When loading the value from the database to a textarea the line breaks are still there though. I have tried replacing the following with <br> but none of it works.
vbCrLf
vbNewLine
Environment.NewLine
...none of those work... what do I need to find/replace with <br> to show breaks?
TextArea uses different newline characters depending on the browser:
Internet Explorer: \r\n
FireFox: \n
It has also been suggested that \r is used in some cases, although, I haven't come across those cases.
Carriage return is encoded as %0D and Line feed as %0A. So if your text is HTML encoded (as it should be), then you need to replace %0D and/or %0A [depending on your environment] with your <br />
Here is a full discussion on the topic http://www.highdots.com/forums/html/standard-newline-character-264611.html.
Look at the string as a byte array, what values are the line breaks? There are only so many options here, 10, 13, both, none?
This works great for me:
string Output = HttpUtility.HtmlEncode(DirtyText); // HTML Encode it first for safety..
return Output.Replace("\n", "<br />"); // Now replace New Lines with HTML BRs
You end up with a safe encoded output, but also nicely formatted line spacing exactly as entered by the user into a standard textarea.

HTML: Newline character for label?

I have a method that sets the text for a label, and I'd like to use it to display several lines of text. Is it possible to insert a character into the text for the label to do this?
You have a few choices. If you can trust your callers, you can allow formatted text to be passed into the parameter (so someone can pass "<br />" as part of the label text. If you can slightly trust them, you can still allow that one particular piece of HTML to come through while disallowing others, but you might want to put the intelligence in your function to limit how many breaks can come in one label.
Another (more obscure) choice would be to designate some other character or sequence of characters that you know will never appear on a label to indicate a break (e.g. "#NEWLINE"), and have the function substitute "<br />" wherever that occurs.
Normally a simple <br/> tag will do it!!