[SOLVED] Adding text into text field while typing

[JustGotAQuestion]

Basically i want to be able to click a button such as "b" while typing in a textarea and have tags like

[b][/b]

appear in the box. How would i do this? Do i have to use javacript?

 

Can someone either explain how to do this or link me?

 

Thanks.

[phpQuestioner]

 

http://www.phpfreaks.com/forums/index.php/topic,171252.msg758382.html#msg758382

[JustGotAQuestion]

Perfect. Now, how can i apply this to a drop down menu? I tried putting an onChange value for every option, but that didn't work. I'm sure putting an onChange for the whole <select> would work, but that would change for each value. Any ideas?

 

EDIT: and onClick doesn't work either.

[phpQuestioner]

<script language="javascript">

// Replaces the currently selected text with the passed text.
function replaceText(text, textarea)
{
// Attempt to create a text range (IE).
if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
{
	var caretPos = textarea.caretPos;

	caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;
	caretPos.select();
}
// Mozilla text range replace.
else if (typeof(textarea.selectionStart) != "undefined")
{
	var begin = textarea.value.substr(0, textarea.selectionStart);
	var end = textarea.value.substr(textarea.selectionEnd);
	var scrollPos = textarea.scrollTop;

	textarea.value = begin + text + end;

	if (textarea.setSelectionRange)
	{
		textarea.focus();
		textarea.setSelectionRange(begin.length + text.length, begin.length + text.length);
	}
	textarea.scrollTop = scrollPos;
}
// Just put it on the end.
else
{
	textarea.value += text;
	textarea.focus(textarea.value.length - 1);
}
}


// Remember the current position.
function storeCaret(text)
{
// Only bother if it will be useful.
if (typeof(text.createTextRange) != "undefined")
	text.caretPos = document.selection.createRange().duplicate();
}


// Surrounds the selected text with text1 and text2.
function surroundText(text1, text2, textarea)
{
// Can a text range be created?
if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
{
	var caretPos = textarea.caretPos, temp_length = caretPos.text.length;

	caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text1 + caretPos.text + text2 + ' ' : text1 + caretPos.text + text2;

	if (temp_length == 0)
	{
		caretPos.moveStart("character", -text2.length);
		caretPos.moveEnd("character", -text2.length);
		caretPos.select();
	}
	else
		textarea.focus(caretPos);
}
// Mozilla text range wrap.
else if (typeof(textarea.selectionStart) != "undefined")
{
	var begin = textarea.value.substr(0, textarea.selectionStart);
	var selection = textarea.value.substr(textarea.selectionStart, textarea.selectionEnd - textarea.selectionStart);
	var end = textarea.value.substr(textarea.selectionEnd);
	var newCursorPos = textarea.selectionStart;
	var scrollPos = textarea.scrollTop;

	textarea.value = begin + text1 + selection + text2 + end;

	if (textarea.setSelectionRange)
	{
		if (selection.length == 0)
			textarea.setSelectionRange(newCursorPos + text1.length, newCursorPos + text1.length);
		else
			textarea.setSelectionRange(newCursorPos, newCursorPos + text1.length + selection.length + text2.length);
		textarea.focus();
	}
	textarea.scrollTop = scrollPos;
}
// Just put them on the end, then.
else
{
	textarea.value += text1 + text2;
	textarea.focus(textarea.value.length - 1);
}
}

window.onload=function() {
// Event Used To Ready IE For Caret Position Storage
document.postmodify.message.focus();
}
</script>

<form name="postmodify">
<textarea id="forumpost" name="message" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onchange="storeCaret(this);" onfocus="storeCaret(this);" style="width:500px;height:250px"></textarea>
<br><br>
<select onchange="surroundText('[color='+this.value+']', '[/color]', document.forms.postmodify.message); return false;">
<option selected>Select Text Color
<option value="blue">Blue
<option value="red">Red
<option value="black">Black
</select>
<form>

[JustGotAQuestion]

Perfect. I knew basically what needed to happen, but i didn't know the syntax. Thanks.