How to preserve simple HTML formatting to textbox input? - html

I only want to maintain the paragraph structure of the users input into a textbox. When I retrieve the text from db, all structure is lost. What's easiest way to save text as recorded?

use <pre></pre>

replace spaces " " with You can't repeat multiple spaces " " in HTML, as they will be collapsed into one space.
Also, replace \n with <br />
Hope that helps!

If you want to store HTML text (rich text with BOLD , Italic and etc) you have to use an editor like CKEditor (http://www.ckeditor.com)

Related

How to style contents of textarea field with CSS

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

How do I inject <br> into text entered through a textarea in rails?

I have a textarea form which takes a large block of text. In this text area, I do a carriage return to end the paragraph and another carriage return to separate the paragraphs.
That text is in #contact_postalcard.message.
However, I need to output into an HTML file. The HTML file has been loaded as a long string which contains 'ReplaceThisWithPostalcardMessage' in it. I want to gsub the text from #contact_postalcard.message for ReplaceThisWithPostalcardMessage.
The problem is that the HTML file does not have any tags for each carriage return. As a result, I get one long run-on paragraph.
How can I format the substituted value in the HTML file properly?
addr_template = addr_template.gsub(/ReplaceThisWithPostalcardMessage/, #contact_postalcard.message)
Use the textarea as normal then display using :
simple_format(data_from_textarea)
How about this?
addr_template = addr_template.gsub(/ReplaceThisWithPostalcardMessage/,
#contact_postalcard.message.gsub("\n", "<br />"))

<input> multi-line capable via CSS

Is there a way to get an <input />-field in HTML to wrap lines if the text is longer than the field using CSS? I don't want to use <textarea /> as I want to avoid users entering hard line-breaks by pressing enter.
No, sorry. <input type=text> is single line by definition. See the W3C document Forms in HTML Documents:
text
Creates a single-line text input control.
Using Dojo's Dijit TextArea form control, based off TextArea, you can have an input field which begins as a single line and expands as the user adds to it.
See its documentation.
You can't do what you want with CSS alone, but you could use JavaScript to prevent the user from entering line breaks in a <textarea> field.
Look at this,
http://www.echoecho.com/htmlforms08.htm
The wrap options are the most tricky part of text areas.
If you turn wrap off the text is handled as one long sequence of text without linebreaks.
If you set it to virtual the text appears on your page as if it recognized linebreaks - but when the form is submitted the linebreaks are turned off.
If you set it to physical the text is submitted exactly as it appears on the screen - linebreaks included.
Your best bet is use a textarea (with autogrow capabilities if you like), and then strip out the new lines when the form is submitted. Using php it would be something like this:
$text = str_replace(array("\n","\r"),'',$_POST['text_field']);
This would have the desired effect of blocking newline characters. As others have pointed out it's not really possible to get multi-line input in an input field.

How to save user-entered line breaks from a TextArea to a database?

How do I save user-entered line breaks from a <textarea> HTML element to a database?
It always removes the line breaks.
TextArea HTML element is preserving the white space in the database.
The problem appears when trying to display the \n on the web browser, which will fail.
To display \n in the web browser use :
<p style="white-space: pre-line">multi-line text</p>
When displaying the content you need to convert line breaks into <br /> tags, otherwise the web browser won't display them. This is probably why you think they aren't being saved. If you're using PHP, use the nl2br() function to do this. In other languages you could do a string replace, replacing all occurrences of "\n" with "<br />".
Just put the output text between <pre></pre> tags, that will preserve the line breaks.
I just learnt to use php's nl2br function and it is working fine for me.
I'm using it to style how my users receive an email when sent from another user.
Your problem will be solved using 'white-space' property: simply use:
<textarea name="description" id="description" style="white-space: pre-wrap;"></textarea>
And continue your work.
I know from experience that Browser text areas are less well-behaved than one would like, especially with regard to line breaks.
You could can to see if javascript would be able to interrogate the text area and find the line breaks before the text is sent to the server and so send the data in a more well-formatted way. But the amount of javascript debugging necessary to make this work across multiple browsers is probably not worth the effort.
Perhaps you should say that format you are trying to capture your data. There may be a better way to get the data than keeping track of line-breaks - though lines breaks can seem like any easy thing to capture in user input.
I noticed that breakable content saved normally if textarea is inside a html form. But if I use textarea without any form and try to edit a long text in it, insert line breaks and save content via ajax, it's saved as a merged text into database
Use PHP nl2br() Function while saving data from textarea to database
like below
<textarea
name="PostContent"
class="form-control"
rows="12" cols="30"
id="PostContent"
required=""
style="white-space: pre-wrap; text-indent: 50px;"
>
</textarea>
$PostContent=$_POST["PostContent"];
$output =nl2br($PostContent);
use $output variable to save to Database
you can add text in the text area and see the formatted text below.
function ex() {
const text = document.getElementById("description").value;
const ss = document.getElementById("add");
ss.textContent = text;
}
<textarea name="description" id="description" style="white-space: pre-wrap;"></textarea>
</br>
<button onclick="ex();">check</button>
</br>
<p style="white-space: pre-line" id="add"></p>
<style>
p {
color: red;
text-align: center;
}
</style>

Add a linebreak in an HTML text area

How can i add a line break to the text area in a html page?
i use VB.net for server side coding.
If it's not vb you can use
(ascii codes for cr,lf)
Add a linefeed ("\n") to the output:
<textarea>Hello
Bybye</textarea>
Will have a newline in it.
You could use \r\n, or System.Environment.NewLine.
If you're inserting text from a database or such (which one usually do), convert all "<br />"'s to &vbCrLf. Works great for me :)
In a text area, as in the form input, then just a normal line break will work:
<textarea>
This is a text area
line breaks are automatic
</textarea>
If you're talking about normal text on the page, the <br /> (or just <br> if using plain 'ole HTML4) is a line break.
However, I'd say that you often don't actually want a line break. Usually, your text is seperated into paragraphs:
<p>
This is some text
</p>
<p>
This is some more
</p>
Which is much better because it gives a clue as to how your text is structured to machines that read it. Machines that read it include screen readers for the partially sighted or blind, seperating text into paragraphs gives it a chance of being presented correctly to these users.
I believe this will work:
TextArea.Text = "Line 1" & vbCrLf & "Line 2"
System.Environment.NewLine could be used in place of vbCrLf if you wanted to be a little less VB6 about it.
Escape sequences like "\n" work fine ! even with text area! I passed a java string with the "\n" to a html textarea and it worked fine as it works on consoles for java!
Here is my method made with pure PHP and CSS :
/** PHP code */
<?php
$string = "the string with linebreaks";
$string = strtr($string,array("."=>".\r\r",":"=>" : \r","-"=>"\r - "));
?>
And the CSS :
.your_textarea_class {
style='white-space:pre-wrap';
}
You can do the same with regex (I'm learning how to build regex with pregreplace using an associative array, seems to be better for adding the \n\r which makes the breaks display).