html markup in form field does not work - javascript

I am creating a site that a user can login and write or paste a text in a form field like so
<textarea name="descr" id="descr" class="textformfront" rows="24" cols="50" required onFocus="cleari();"></textarea>
The text is saved in a DB (postgreSQL 9.1-extended with PostGIS 2.0). The data type of the column in the DB is "text". Then the text is displayed in the front-end, in a div like so
<div id="formdescr" style="overflow-y:auto; height:400px; width:100%;"></div>
My problem is that if the user insert a long text in the form, with paragraphs and breaks, in the div none of those is displayed. In the div all I see is a continuous text with no breaks, no paragraphs.
How do I fix this?
Thanks.
UPDATE
I use nodejs 0.10.12 / websockets to transfer from DB to browser and from browser to DB. I put text in the div like document.getElementById("formdescr").innerHTML=descr; where descr came from websockets in the client. In the source code I see no text. The user has to search first and then the div will get text.

Your problem is that browsers ignore white space in content. Multiple spaces and new lines are all collapsed down into one space in the rendered output.
If you want to preserve all of the original formatting, with indents and line breaks, you could output the text into a <pre> block inside that div.
Your other option is to encode the white space into html entities. Use <br> for line breaks and for spaces that should be preserved.

Your solution very likely depends on the backend programming language you use, not the database. I guess this should answer your question if you use php (and if not, you should be able to do the transfer ;-) )

Related

what is best practice to show typed data - textarea vs p tag

I have a form that users create a profile. In the form there is a textarea in which hey put their blurb / description whatever.
Later when I want to show the profile in a view only screen, what is best practice? To use a <p> tag or an html tag?
It appears I lose the paragraphs etc when I display the data in a <p> tag.
If, the best practice is to maybe use a readonly textarea for view purposes, how can one dynamically adjust the rows depending on the length of text?
Textareas are designed for accepting input from users, not displaying data back to them.
You need to process the submitted data before displaying it on the user profile. Typically this would involve formatting (like splitting the content on double new lines and then wrapping each part of the result with paragraphs) and implementing protection against XSS attacks.
For formatting, you might consider using a Markdown engine (similar to what Stackoverflow does).
Use the <p> tag.
It is ok, but you should modify the contents, before output at least with two functions:
1) htmlentities() - to protect against XSS attacks and print any html symbols as text
2) nl2br() - to add <br/> tags (html new line) next to \n symbols (new line in text format)
You can look at the <pre> tag as well, then you do not need the nl2br() function

Preserving Formatting from HTML to textarea

I use markdown for text editing within my project. The markdown is converted to HTML and stored in the database for rendering in the view.
Currently, when users would like to edit a post, for example, the stored text is pulled from the database and used as the initial value in the textarea that my markdown editor/converter makes use of.
It's easy enough to strip the tags from the text so they don't show up in the textarea, but I'd really like to preserve things like line breaks as well.
This seems possible, as Stackoverflow uses markdown and during editing line breaks from the text being edited are preserved in the textarea.
The markdown is converted to HTML and stored in the database for rendering in the view.
This is your problem.
You should store the markdown and then use that in your textarea.

Allow HTML to be entered in text area

So I don't know if I'm looking for the wrong thing on Google or Stackoverflow, but I want to achieve this-
There is a text-area in a form and I want the user to be able to enter HTML tags.
So the user would enter this in to the text area:
<html>
<p>Hello World</p>
</html>
This is then submitted by AJAX and JavaScript to the database however is seems to get rid of the tags.
What I'm wanting is to keep the tags when the data is returned, however not actually affect the other data in the text area. So example if I was to echo out the content of the text area it would echo out:
<html>
<p>Hello World</p>
</html>
as plain text.
Okay I have gone down the root of using htmlspecialchars, which does what I wanted, as it displays the tags as plain text. However I would like some tags to be executed sill such as the bold tag. How would I combine htmlspecialchars and striptags to allow tags to be displayed as plain text but also allow the tags specified in the striptags to be executed.
There is nothing you need (or can) do to allow users to enter HTML tags. The reason is that the input is read as plain text anyway, so any < character is taken just as-is. So if the user types <a>, these three characters get inserted into the form data.
What you do with the data then, server-side or otherwise, may or may not handle HTML tags. It’s all up to your code. If you simply echo everything as such on a generated HTML page, then HTML markup will have the usual effect. If you wish to render it as text, as visible tags, then simply encode any & as & and any < as <.
You don't need to do anything, it automatically does as long as you dont filter the user submitted text.
N.B. If you want to echo the entered HTML back to users, be very aware of potential malicious code in the entered HTML. This security issue is known as Cross-site scripting (or XSS).
In other words: never trust the entered code

Detect if an HTML table has been pasted into a textarea

I was wondering if there was a way to detect (or at least make a good assumption) whether text pasted into a textarea includes content copied from an HTML table?
I'm finding users of my website are pasting tabular data (from other websites) into their comments and I'm wanting to clean up the way my website displays those comments.
I'm using PHP, but I'm not too fussed if there's a way to do this with Javascript.
And bonus points if your suggestion can keep the table formatting :)
A pure textarea can't receive formatted content. If your users copy a table, div, or whatever HTML structure from other sites and paste into a textarea, you'll have access only to the pure visible text of the copied content, not the HTML code. Using a textarea, the only way to paste HTML code is if your user copy the code directly =).
An alternative is to use a WYSIWYG like Redactor or CKeditor, it can retain rich text and you'll be able to get the HTML that your users paste there.
Or you can simplify and use the attribute contenteditable with other tag (like a div) and test if there's a table using a Regex, this way:
<div id="yourDiv" contenteditable>Paste a table here!!</div>
var yourHTML = document.getElementById("yourDiv").innerHTML;
var thereIsATableHere = /<table[^>]*>(.*?)<\/table>/.test(yourHTML);

jQuery: Inserting formatted text into a textarea

I have a drop-down list which causes a text-area to populate with different text depending on what's selected. I have this part working fine, but I'm not able to format the text to show paragraphs. using regular html, just causes it to be printed out.
Does any one know can I create paragraphs, etc?
Thanks Guys!!
You'll need to use some sort of rich text editor, like CKEditor, or, use newlines \n. The <p> will be interpreted literally in a textarea.
<p> is an HTML tag. <textarea> doesn't recognize HTML tags, unless you're using some kind of rich-text editor.
That said, you can create line breaks in your <textarea> using \n like this:
$('#my-text-area').text('foo\nbar');

Categories