Insert Text into TextArea on Client

[expinch]

I'm working on a page where I have a <textarea> control and several hyperlinks. I want to be able to enter text into the <textarea> simply by typing, but I also want to be able to insert text into the textarea by clicking on the hyperlinks (The tokens which will be inserted into the textarea by clicking on the hyperlinks will be replaced by dynamic data when the data in the textarea is processed by the server).


<textarea></textarea>

<a href="#">[Token1]</a>
<a href="#">[Token2]</a>
<a href="#">[Token3]</a>

What I want is to insert the text inside the <a> tags into the textarea at the last place the cursor was located. Is this possible?

[BillyGalbreath]

...What I want is to insert the text [...] into the textarea at the last place the cursor was located. Is this possible?

As far as I know, it is not possible to detect where the cursor is. Thats why all forums (etc) have their bbcode/smilies buttons insert the code at the end of the textarea text, no matter where your cursor is.

Plus, even if it was possible to detect where the cursor is, as soon as you press the mouse button down, the textarea will lose focus, and the anchor tag will not activate until the mouse button is released. When the mouse button is released, the textarea already has lost focus, thus any cursor placement is now lost.

;)

[drew81]

Most browsers excluding IE will allow you to select and drag any anchor or image path into textarea. So setting...

<textarea></textarea>
<br /><a href="[Token1]">[Token1]</a> // print "http://domain.com/%5DTOKEN2%5D"
<br /><a href="s:'[Token2]'">[Token2]</a> // print "s:['TOKEN]"


On the second one i've fooled it into thinking its an arbitary protocol by using "s:"

Otherwise this si what your looking for but also doesn't work in IE... just FF

CODE]
/**
* EDITOR
* Insert the value s into any part of the selected form element.
*/
function insert_into_cursor( prefix, suffix, target )
{
/**
* What is the currently selected text item?
*/
var start, end, sel, scrollPos, subst;

var textarea = Element( target );

textarea.focus();

if (document.selection !== undefined)
{
sel = document.selection.createRange().text;
}
else if ( textarea.setSelectionRange !== undefined )
{
start = textarea.selectionStart;
end = textarea.selectionEnd;
scrollPos = textarea.scrollTop;
sel = textarea.value.substring(start, end);
}

if ( sel.match(/ $/) )
{ // exclude ending space char, if any
sel = sel.substring(0, sel.length - 1);
suffix = suffix + " ";
}
subst = prefix + ( ! empty( suffix ) ? sel + suffix : "" );
if (document.selection != undefined)
{
var range = document.selection.createRange().text = subst;
textarea.caretPos -= suffix.length;
}
else if ( textarea.setSelectionRange !== undefined )
{
textarea.value = textarea.value.substring(0, start) + subst +
textarea.value.substring(end);
if (sel)
{
textarea.setSelectionRange(start + subst.length, start + subst.length);
}
else
{
textarea.setSelectionRange(start + prefix.length, start + prefix.length);
}
textarea.scrollTop = scrollPos;
}
}

[/CODE]