TextArea - CreateRange, caretPos

[CurlyBracket]

Hey, guys. I'm kind of a JavaScript newbie.... I tend to avoid the language unless it's absolutely necessary -- now is one of those times. I'm trying to incorporate some code for a tagboard form that will insert BBcode. I've got two scripts that accomplish this, but both have flaws that I don't have the knowledge to fix.


function markSelection ( txtObj ) {
if ( txtObj.createTextRange ) {
txtObj.caretPos = document.selection.createRange().duplicate();
isSelected = true;
}
}

function insertTag ( txtName, tag, enclose ) {
var closeTag = tag;
if ( enclose ) {
var attribSplit = tag.indexOf ( ' ' );
if ( tag.indexOf ( ' ' ) > -1 )
closeTag = tag.substring ( 0, attribSplit );
}
if ( isSelected ) {
var txtObj = eval ( "document.forms[0]." + txtName );
if (txtObj.createTextRange && txtObj.caretPos) {
var caretPos = txtObj.caretPos;
caretPos.text = ( ( enclose ) ? "<"+tag+">"+caretPos.text+"</"+closeTag+">" : "<"+tag+">"+caretPos.text );
markSelection ( txtObj );
if ( txtObj.caretPos.text=='' ) {
isSelected=false;
txtObj.focus();
}
}
} else {
// placeholder for loss of focus handler
}
}

// Called on form:
// <textarea name="tsttxt" ONSELECT="markSelection(this);"
// ONCLICK="markSelection(this);" ONKEYUP="markSelection(this);"></textarea>
// <input type="button" value="BOLD" onClick="insertTag ( 'tsttxt', 'b', true )">


It accomplishes wrapping tags around selected text and, if nothing is selected, inserting the tags at the cursor position. But when the form first loads, if the textarea isn't focused (and therefore there is no cursor position) when the button is pressed, I get a little JavaScript error. Also, to apply multiple tags, the user has to click on the textarea each time to put it back in focus.
Basically what I'm asking is if someone can help me with this code to make it 1) suppress that out of focus error and 2) regain focus after an insertion.

The other script I have assumes textarea focus when clicking one of the BBcode buttons and therefore doesn't give me an error, and also has the ability to insert several tags in a row, but alas it doesn't detect and insert at cursor position (tags always go at the end of text). I'm not sure if making it do so would create the same problems as the script above has.


var pc = navigator.userAgent.toLowerCase();
var ie4_win = (pc.indexOf("win")!=-1) && (pc.indexOf("msie") != -1)
&& (parseInt(navigator.appVersion) >= 4);
var checked = false;
function checkPost() {
if (!checked) {
checked = true;
return true;
}
return false;
}
function styleTag(tag, ta) {
var tagOpen = '[' + tag.toLowerCase() + ']';
var tagClose = '[/' + tag.toLowerCase() + ']';
if (ie4_win) {
var selected;

if (document.selection.createRange().parentElement().tagName == 'TEXTAREA') {
selected = document.selection.createRange().text;
}

if (selected) {
var addSpace = false;
if (selected.charAt(selected.length-1) == ' ') {
selected = selected.substring(0, selected.length-1);
addSpace = true;
}
document.selection.createRange().text
= tagOpen + selected + tagClose + ((addSpace)?" ":"");
} else {
ta.value += tagOpen + tagClose;
}
} else {
ta.value += tagOpen + tagClose;
}
ta.focus();
return;
}
function caret(ta) {
if (ie4_win && ta.createTextRange &&
document.selection.createRange().parentElement().tagName == 'TEXTAREA')
{
ta.caretPos = document.selection.createRange().duplicate();
}
}

// Called on Form:
// <textarea name="msgBody" ></textarea>
// <input type="button" value="BOLD"onclick="styleTag('b',document.editform.msgBody);return false;">



Thanks for any and all help!

[senshi]

look at the on events

focus is a method of putting the cursor into the box that you want the focus to be on when the page loads.
onblur is a method of watching when the focus moves from the selected box.

use of both can effectively watch for the cursors focus to change and then re apply the focus to the said box. So an onblur & focus nesting of the methods is what you need, a small function to deal with this test can be got by applying an onChange even on the actual object (text area).