How to add html element to the current textarea value, and output it as raw html

Question

I need to style the total cost for user added in a textarea.

I have this fragment of code:

$("#student_teacher_profile_for_teaching_amount").keyup(function(e) {
    var new_str, price, regex, str;
    regex = /[0-9]+\.[0-9]{1,2}|[0-9]/;
    str = $(this).val();
    console.log(str);
    price = str.match(regex);
    if(price) {
        if( $("#to_teach_ammount").length > 0 ) { 
            $("#to_teach_ammount").html(price[0]);
        } else {
            new_str = str.replace(regex, "<span id='to_teach_ammount'>" + price[0] + "</span>");
            $(this).val(new_str);
        }
        $("#to_teach_total").val(price[0]); #this is and hiddent input filed
    }
});

As a result of it I get:

some text before numbers <span id='to_teach_ammount'>2</span>

in my textarea.

How can I convert this into raw HTML?

you are trying to style part of the text that is inside a textarea? I do not believe this is possible. Also, if you place html tags in a text area, they will appear as html code. they will not be redered as html. — CodeToad, Sep 29 '13 at 10:02
This is not possible as the html can not be rendered inside the text area. — Kelsadita, Sep 29 '13 at 10:04
[textarea](http://www.w3.org/wiki/HTML/Elements/textarea) element represents a multiline plain text edit control for the element's raw value. You will need to find an alternative way to do what you want. — Xotic750, Sep 29 '13 at 10:05
There are a number of similar/same questions on SO. One of them is http://stackoverflow.com/questions/3282505/highlight-text-as-you-type-on-textarea — Xotic750, Sep 29 '13 at 10:16

score 1 · Accepted Answer · answered Sep 29 '13 at 10:08

1

This is not possible with a common <textarea> element, which only accepts plain text. You will have to use a (rich-text)-plugin, for example with jQuery. Have a look here: http://www.strangeplanet.fr/work/jquery-highlighttextarea/

answered Sep 29 '13 at 10:08

jotaen

6,739
1
11
24

score 0 · Answer 2 · answered Sep 29 '13 at 10:05

The to_teach_total should not be a textarea. Instead it should be an element which expects html

Then use $(this).html(new_str) to set html

This html() method can also be passed a function which can take old html as parameter and return a new string to be set as new html

How to add html element to the current textarea value, and output it as raw html

2 Answers2