Question

I have jquery that generates textareas with different id’s. Now i need to make some buttons that will format text inside that textareas. For example: when user clicks in certain textarea, enter text, and click “bold” button, only text inside of that textarea will become bold (in other will be normal). I did manage to make something like this with JS, but it was too primitive (text was formated in all of textboxes) 🙁
Here is some sample code for this:

<button id="bold">B</button>
<textarea id="ta_1">Some test text</textarea>
<textarea id="ta_2">Some test text</textarea>

What i want to say: one button, multiply text boxes. Entering text in ta_1 and clicking bold, should bold only text in that txtarea. Additional info: all id’s starting with same word, just different number at the end.

I feel there is some simple solution, just cant figure it out 😀

Answer 1

Actually this is a really bad practice, but you can do that like this,

var activeEl;

$("textarea").focus(function() {
  activeEl = $(this);
});

$("#bold").click(function() {
  $("textarea").css("font-weight", "");
  activeEl.css("font-weight","bold");
});

​
​
DEMO

UPDATE-1: I don’t know why you are trying to do this, but I suggest to you use a WYSIWYG Editor like elRTE

UPDATE-2 : You can costomize your toolbar in elRTE, if you want your editor has just a “bold” button, yes you can do that,

$(document).ready(function() {
    elRTE.prototype.options.panels.web2pyPanel = ['bold'];
    elRTE.prototype.options.toolbars.web2pyToolbar = ['web2pyPanel'];
    var opts = {
        toolbar: 'web2pyToolbar',
    }
    var rte = $('#our-element').elrte(opts);
});​

DEMO FOR elRTE