Bold String in TextArea using JS

Question

I am auto populating text in a text area based on a value selected from a ddl.

Now I can get the text to appear, but I would like that text to be bold.

I have this:

$(document).ready(function () {
$('#activityID').change(function () {
    var selectedActivity = this.options[this.selectedIndex].parentNode.label;
    var text = "Event Name: \nEvent Location: \nEstimated # of Participants:"
    var result = text.bold();
    if (selectedActivity === "DEMONSTRATIONS") {
        $('#Summary').val(result);
    }
    else if (selectedActivity !== "DEMONSTRATIONS") {
        $('#Summary').val("");
    }
});
});

In the TextArea it is rendering as:

<B>Event Name: 
Event Location: 
Estimated # of Participants:</B>

Is there any possible way to get this text to render as bold when that specific item is chosen from the DDL?

I have referenced this but this did the same thing as above.

Any help is appreciated.

Are you trying to format all text in the text area? Or selectively format it? — jwatts1980, May 25 '16 at 18:33
A basic textarea does not support selective formatting. You would need a plugin to make it support rich text. — jwatts1980, May 25 '16 at 18:33
NOTE: `string.bold()` is deprecated and shouldn't be used. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/bold — gen_Eric, May 25 '16 at 18:33
@jwatts1980 I only want the string that is in the `var text` to be in bold.. but whatever the text that the user enters in after that to be normal.. no bold — Grizzly, May 25 '16 at 18:33
related [http://stackoverflow.com/questions/4705848/rendering-html-inside-textarea](http://stackoverflow.com/questions/4705848/rendering-html-inside-textarea) — grabthefish, May 25 '16 at 18:35
Of relevance to the link posted by @Gunther34567 : http://caniuse.com/#search=contenteditable — jwatts1980, May 25 '16 at 18:36
@Gunther34567 that did work. thank you. now just need to find a way so that only the text that is auto populated to be bold and not what the user types in — Grizzly, May 25 '16 at 18:46
@jwatts1980 that did work. thank you. now just need to find a way so that only the text that is auto populated to be bold and not what the user types in — Grizzly, May 25 '16 at 18:46
@jwatts1980 do you know of any plugins off the top of your head that I could use? — Grizzly, May 25 '16 at 18:53

kvn · Answer 1 · 2016-05-26T07:30:30.313

1

If you want the text to appear bold, you should be changing the CSS properties of the element.

var result = $("<span>").text(text).css({ 'font-weight': 'bold' });

This should solve your problem.

edited May 26 '16 at 07:30

answered May 25 '16 at 18:33

kvn

2,210
5
20
47

Edited my answer. Bold should be a string. – kvn May 26 '16 at 07:30

score 1 · Accepted Answer · answered May 25 '16 at 19:21

What he said above, but quote the word bold:

var result = $("<span>").text(text).css({ 'font-weight': 'bold' });

Or better yet, apply a CSS class to the field and associate that class with bold in your css files.

var result = $("<span>").text(text).addClass('mybold');

And in your css:

span.mybold: { font-weight: bold; }

Bold String in TextArea using JS

2 Answers2