Assuming that you have jQuery already plugged into your website, this is a simple bit of javascript to insert a string a the selected text within a textbox. It is fully IE6+, FF2+, Safari, Chrome compatable in the same way jQuery is itself, so here is the javascript to insert a single string at the selected point (or caret). This bit of code has been built on variaas code found at mail-archive.com which is the jQuery adaptation of this bit of code at alexking.org
$.fn.insertAtCaret = function (tagName) {
return this.each(function(){
if (document.selection) {
//IE support
this.focus();
sel = document.selection.createRange();
sel.text = tagName;
this.focus();
}else if (this.selectionStart || this.selectionStart == '0') {
//MOZILLA/NETSCAPE support
startPos = this.selectionStart;
endPos = this.selectionEnd;
scrollTop = this.scrollTop;
this.value = this.value.substring(0, startPos) + tagName + this.value.substring(endPos,this.value.length);
this.focus();
this.selectionStart = startPos + tagName.length;
this.selectionEnd = startPos + tagName.length;
this.scrollTop = scrollTop;
} else {
this.value += tagName;
this.focus();
}
});
};
All this basically does is depending on the browser, add tagName to the document where the caret is, if it fails to do this it will just append it, so either way the text will be added to the text area. The way to then use this would be
$("button#btnID").click(function(){$('#textareaID').insertAtCaret(':)')});
so when the button with id btnID is clicked, assuming a caret is in the text has been made
will be inserted into the selection in the element with ID textareaID If no selection has been made, it will append it to the end of the text area, so if the text area is blank it will simply insert it.
This is really useful, but you would probably want to insert around a selection not just overwrite it, so this next function does just that
$.fn.insertRoundCaret = function (tagName) {
return this.each(function(){
strStart = '['+tagName+']';
strEnd = '[/'+tagName+']';
if (document.selection) {
//IE support
stringBefore = this.value;
this.focus();
sel = document.selection.createRange();
insertstring = sel.text;
fullinsertstring = strStart + sel.text + strEnd;
sel.text = fullinsertstring;
document.selection.empty();
this.focus();
stringAfter = this.value;
i = stringAfter.lastIndexOf(fullinsertstring);
range = this.createTextRange();
numlines = stringBefore.substring(0,i).split("\n").length;
i = i+3-numlines+tagName.length;
j = insertstring.length;
range.move("character",i);
range.moveEnd("character",j);
range.select();
}else if (this.selectionStart || this.selectionStart == '0') {
//MOZILLA/NETSCAPE support
startPos = this.selectionStart;
endPos = this.selectionEnd;
scrollTop = this.scrollTop;
this.value = this.value.substring(0, startPos) + strStart + this.value.substring(startPos,endPos) + strEnd + this.value.substring(endPos,this.value.length);
this.focus();
this.selectionStart = startPos + strStart.length ;
this.selectionEnd = endPos + strStart.length;
this.scrollTop = scrollTop;
} else {
this.value += strStart + strEnd;
this.focus();
}
});
};
Very similar but with slight differences, this would allow for a [b] & [/b] or an [italic] & [/italic] (pretty much anything) to be placed around some text rather than just a single character at the caret. The IE code looks a little messy because it counts a line return \n as a character so it has some funky maths in it. An example of this is:
$("button#bold").click(function(){$('#textareaID').insertRoundCaret('b')});
This would insert [b] at the start of the selection in the text area and a [/b] at the end of the selection in the text area. If no text is selected it would simply append it. So, if you were creating some style box or tinyMCE type thing, you could have something like this:
$(document).ready(function() {
$("button#smile").click(function(){$('#textareaID').insertAtCaret(':)')});
$("button#frown").click(function(){$('#textareaID').insertAtCaret(':(')});
$("button#wow").click(function(){$('#textareaID').insertAtCaret(':O')});
$("button#bold").click(function(){$('#textareaID').insertRoundCaret('b')});
$("button#italic").click(function(){$('#textareaID').insertRoundCaret('i')});
$("button#underline").click(function(){$('#textareaID').insertRoundCaret('u')});
});
EDIT - Added demo file and added missed }; in code – Demo file – jquery_demo_1