How can I position the cursor at a specific point from the end of a text area?

[tomorobi]

I have the following Javascript function on a page:

function makeBold(target) {
document.getElementById(target).focus();
document.getElementById(target).value=document.getElementById(target).value.concat('<b></b>');
}

On the page is an image with this HTML:

[HTML]<a onclick="javasc ript: makeBold('descr iption');"><img src="images/button_bold.gif " border="0"></a>[/HTML]

When I click on the button, the function makeBold() adds the HTML tags <b></b> to the end of a text area named "descriptio n". It also puts the cursor at the end of these tags. This is good, but what I really want to do is put the cursor between the beginning <b> tag and the end </b> tag. The idea is to make the text area resemble the fuctionality of Dreamweaver.

Is there any way I can set the position of the cursor between the tags? I think maybe some way to put the cursor at a specific distance from the end of the text area is the way to go, but I am not good enough at this.

Any help you can give would be appreciated! Thanks!

[acoder]

Introduction to Ranges should get you started.