Stephen Groom Music Producer? Poker Pro? Sports Bettor? Tune in next post to find out

JAVASCRIPT: Add BBCode buttons to a form (REVISITED)

From looking at my visitor logs I can see that the clear favourite page on this site is my [url=http://blog.groomi.net/JAVASCRIPT:_Add_BBCode_buttons_to_a_form-,9]BBCODE Buttons[/url] tutorial. After typing a little comment into a blog on here, I realised that the script still is far from perfect and set about improving it.

The problem I had, was that whenever you inserted a piece of bbcode (wherever in the text you did it) the mouse caret (cursor) would always default back to the end of the textarea (A pain in the ass if you're typing something before then).

I then set about making some additions + changes to [i]mybbcode_ins()[/i] function.

What I needed to do was:
1. Find the current cursor position
2. Find the length of the text that I will be inserting
3. Add this to the current position
4. Set the mouse position to the new location.

As always, this was a breeze in Firefox and was acheived by changing the lines

[code]var startPos = field.selectionStart;
var endPos = field.selectionEnd;
field.focus();
field.value = field.value.substring(0, startPos)
+ '[' + tag + '='+url+']' + linkText + '[/' + tag+']'
+ field.value.substring(endPos, field.value.length);
[/code]

to

[code]
var startPos = field.selectionStart;
var endPos = field.selectionEnd;
field.focus();
field.value = field.value.substring(0, startPos) + tag + field.value.substring(endPos, field.value.length);
field.setSelectionRange(endPos+tag.length, endPos+tag.length);
[/code]

I used the smilies section of the code to show the change as this is the easiest to understand. Basically, I have done the 4 steps listed above..

This is all done with the line [i]field.setSelectionRange(endPos+tag.length, endPos+tag.length);[/i] which does step 1 (endPos), step 2 (tag.length), step 3 and 4 (setSelectionRange(endPos+tag.length, endPos+tag.length);)

This however is alot more difficult in IE..

Internet Explorer being as dumb as it is doesn't have a simple way to find the current cursor position. The way it is acheived is by:

1. Making a selection at the current position
2. Moving the selection start to the beginning
3. The cursor location is then the length of your selection
Easy huh?? Not..

What we end up for IE is this

[code]var selected = document.selection.createRange().text;
var ins = tag;
var selected2 = document.selection.createRange();
var sel = document.selection.createRange();
sel.text = tag;
selected2.moveStart ('character', -field.value.length);
sel.moveStart('character', selected2.text.length + ins.length - selected.length);
[/code]
Bloody horrid when compared to the Firefox code, don't you think??

Well. Most of you have probably read the first tutorial and understood that, and are just after the new code.. I give you, [b]bbcode_ins()[/b]

[code]function bbcode_ins(fieldId, tag)
{
field=document.getElementById(fieldId);
if(tag=='b' || tag=='i' || tag=='u' || tag == 'php' || tag == 'code')
{
if (document.selection)
{
field.focus();
var selected = document.selection.createRange().text;
var ins = '[' + tag + ']' + selected + '[/' + tag +']';
var selected2 = document.selection.createRange();
var sel = document.selection.createRange();
selected2.moveStart ('character', -field.value.length);
sel.text = '[' + tag + ']' + selected + '[/' + tag+']';
sel.moveStart('character', selected2.text.length + ins.length - selected.length);

}

//MOZILLA/NETSCAPE/SAFARI support

else if (field.selectionStart || field.selectionStart == 0)
{
var startPos = field.selectionStart;
var endPos = field.selectionEnd;
var selected = field.value.substring(startPos, endPos);
var ins = '[' + tag + ']' + selected + '[/' + tag +']';
field.focus();
field.value = field.value.substring(0, startPos) + ins + field.value.substring(endPos, field.value.length);
field.setSelectionRange(endPos+ins.length, endPos+ins.length-selected.length);
}
}
else if(tag == 'img')
{
var path = prompt('Enter image path', 'http://');
if(!path)
{
return;
}
if (document.selection)
{
field.focus();
var selected = document.selection.createRange().text;
var ins = '[' + tag + ']' + path + '[/' + tag+']';
var selected2 = document.selection.createRange();
var sel = document.selection.createRange();
sel.text = '[' + tag + ']' + path + '[/' + tag+']';
selected2.moveStart ('character', -field.value.length);
sel.moveStart('character', selected2.text.length + ins.length - selected.length);
}
//MOZILLA/NETSCAPE/SAFARI support
else if (field.selectionStart || field.selectionStart == 0)
{
var startPos = field.selectionStart;
var endPos = field.selectionEnd;
var ins = '[' + tag + ']' + path + '[/' + tag+']';
field.focus();
field.value = field.value.substring(0, startPos)
+ ins
+ field.value.substring(endPos, field.value.length);
field.setSelectionRange(endPos+ins.length, endPos+ins.length-selected.length);
}
}
else if(tag == 'url')
{
var url = prompt('Enter link URL', 'http://');
var linkText = prompt('Enter link text', '');
if(!url || !linkText)
{
return;
}
if (document.selection)
{
field.focus();

var selected = document.selection.createRange().text;
var ins = '[' + tag + '='+url+']' + linkText + '[/' + tag+']';
var selected2 = document.selection.createRange();
var sel = document.selection.createRange();
sel.text = '[' + tag + '='+url+']' + linkText + '[/' + tag+']';
selected2.moveStart ('character', -field.value.length);
sel.moveStart('character', selected2.text.length + ins.length - selected.length);

}
//MOZILLA/NETSCAPE/SAFARI support
else if (field.selectionStart || field.selectionStart == 0)
{
var startPos = field.selectionStart;
var endPos = field.selectionEnd;
var ins = '[' + tag + '='+url+']' + linkText + '[/' + tag+']';
field.focus();
field.value = field.value.substring(0, startPos)
+ ins
+ field.value.substring(endPos, field.value.length);
field.setSelectionRange(endPos+ins.length, endPos+ins.length-selected.length);
}
}
else //For smilies
{
if (document.selection)
{
field.focus();

var selected = document.selection.createRange().text;
var ins = tag;
var selected2 = document.selection.createRange();
var sel = document.selection.createRange();
sel.text = tag;
selected2.moveStart ('character', -field.value.length);
sel.moveStart('character', selected2.text.length + ins.length - selected.length);
}

//MOZILLA/NETSCAPE/SAFARI support

else if (field.selectionStart || field.selectionStart == 0)
{
var startPos = field.selectionStart;
var endPos = field.selectionEnd;
field.focus();
field.value = field.value.substring(0, startPos) + tag + field.value.substring(endPos, field.value.length);
field.setSelectionRange(endPos+tag.length, endPos+tag.length);
}
}
}[/code]

I am also considering having the caret sit between the two tags. This will be a simple subtraction of 4 from the length added to the current position.

Please don't be afraid to comment or ask questions below as we have lots of people viewing the site but very few contributing. Please drop me a comment telling me wether you hate me, appreciated my code, want to hire me for work :wave: etc etc. I don't bite, and will probably write some new code if I see that mine is being appreciated

Much Love
Stephen