Format Text in a ≪Textarea≫

Format text in a textarea?

If you need to customize your textarea, reproduce its behavior using another element (like a DIV) with the contenteditable attribute.

It's more customizable, and a more modern approach, textarea is just for plain text content, not for rich content.

<div id="fake_textarea" contenteditable></div>

The scrollbars can be reproduced with the CSS overflow property.

You can use this fake textarea in a form normally, i.e: if you have to submit its content through POST method, you could do something like(with jQuery):

<input type="hidden" id="fake_textarea_content" name="foobar">

...

$('#your_form').submit(function()
{
$('#fake_textarea_content').val($('#fake_textarea').html());
});

How can I format text in an HTML textarea?

You don't want line breaks. Trust me.

Just set this:

white-space: pre-wrap;

This CSS will make whitespace significant, preserving it as it was typed.

How is formatting in textarea being done?

In textarea values, the line breaks are marked with the EOL character (/r, /n or /r/n). Those characters do not have any visual impact on HTML (only in the source). What you want is to make them visible by replacing them with <br/> or <p></p>

Your best bet is to replace those characters when displaying the text, so your user won't see the tags if they edit their comments.

This, with some more options like adding <b></b> and <i></i> when text is surrounded by single or double asterisks ( * ) would give you a fairly close formatting to stackoverflow, which does use a textarea unlike you believe.

EDIT: Like suggested by others, there exists WYSIWYG (What You See Is What You Get) editors which means the user sees exactly the result of his comment, and can edit the styles just as if they were in Microsoft Word or similar. This approach might be fine, but it is way overkill for comments. Reddit and stackoverflow allows to see a PREVIEW of your content before posting, but they do not allow to see, while typing, the live results. 2 solutions, both work, you just need to choose the one you think would be best for your users.

Also, when using a simple textarea, you might want to look at markdown, you could provide markdown support (which is very close to how we format our text here) that way some people won't even need to (re)learn how to format their text on your site, as it is the same as other sites / tools.

EDIT2:

Here is a fast/basic implementation of 4 styling applications: single line-break, double line-break to paragraph, double asterisk to make bold, single asterisk to make italic.

$("#editor").on('keyup', function(e) {  var input = $(e.target).val();  input = input.replace(/[\n]{2}/, '</p><p>');  input = input.replace(/[\n]{1}/, '<br/>');  input = input.replace(/\*\*(.+)\*\*/, '<strong>$1</strong>');  input = input.replace(/\*(.+)\*/, '<em>$1</em>');  $('#result').html('<p>' + input + '</p>');});
#result {  border: 1px solid #777;  background-color: #CCC;}#editor{  width:100%;  height:100px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><textarea id="editor">
</textarea>
<div id="result">
</div>

Displaying text in textarea with formatting in place (e.g. br)

this is not possible to do this with textarea. you can use content editable div

var theString = `Hello.<br>Hi.<br>Hey, <strong>user</strong> <span style="color: red">Logout</span>.`

// in pure js
document.getElementById('textareaContent').innerHTML = theString;

// OR in jQuery
$('#textareaContent').html(theString)
div {
width: 250px;
height: 150px;
border: 1px solid #ababab;
padding: 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="textareaContent" contenteditable="true"></div>

I want the text that is input in TextArea in same format

You can use the pre tag for displaying the content as entered.

I have created following example using vanilla JS. You can implement the same in react.

<textarea id="tarea" rows="2" style="width: 100%" onclick="handleValue()"></textarea><p id="display"></p><script>  function handleValue() {    var tarea = document.getElementById('tarea');    var disp = document.getElementById('display');    disp.innerHTML = '<pre>' + tarea.value + '</pre>';  }</script>

Adding text formatting to textarea

In the below demo, you need to click on the text area before the buttons are enables.

<div id="sample">  <script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script> <script type="text/javascript">//<![CDATA[  bkLib.onDomLoaded(function() {        new nicEditor().panelInstance('area1');        new nicEditor({fullPanel : true}).panelInstance('area2');        new nicEditor({iconsPath : '../nicEditorIcons.gif'}).panelInstance('area3');        new nicEditor({buttonList : ['fontSize','bold','italic','underline','strikeThrough','subscript','superscript','html','image']}).panelInstance('area4');        new nicEditor({maxHeight : 100}).panelInstance('area5');  });  //]]>  </script>  <h4>    Default (No Config Specified)  </h4>  <p>    new nicEditor().panelInstance('area1');  </p>  <textarea cols="50" id="area1"></textarea>  <h4>    All Available Buttons {fullPanel : true}  </h4>  <p>    new nicEditor({fullPanel : true}).panelInstance('area2');  </p>  <textarea cols="60" id="area2">Some Initial Content was in this textarea</textarea>  <h4>    Change Path to Icon File {iconsPath : 'path/to/nicEditorIcons.gif'}  </h4>  <p>    new nicEditor({iconsPath : 'nicEditorIcons.gif'}).panelInstance('area3');  </p>  <textarea cols="50" id="area3"></textarea>  <h4>    Customize the Panel Buttons/Select List  </h4>  <p>    {buttonList : ['fontSize','bold','italic','underline','strikeThrough','subscript','superscript']}  </p>  <textarea cols="50" id="area4">HTML content default in textarea</textarea>  <h4>    Set a maximum expansion size (maxHeight)  </h4>  <p>    {maxHeight : 100}  </p>  <textarea style="height: 100px;" cols="50" id="area5">HTML content default in textarea</textarea></div>

How to format or style text in textarea?

Use the single backtick :

 text1 = `
Invoice No, : 1
Status : 2
Pallet LP : 3
... : 4`
}

https://stackblitz.com/edit/angular-aewrtv?file=src/app/app.component.ts

Can I embed HTML formatting inside of a textarea tag?

I am pretty sure the answer is no -- cannot do it with a textarea.

From the MDN docs:

The HTML <textarea> element represents a multi-line plain-text editing control.

  • Permitted content Text


Related Topics



Leave a reply



Submit