Unable to set focus on HTC div element

Can we put a code in the onclick event of the DIV element to put the cursor where the mouse is??

Post relevant code needed to recreate the problem. It's impossible to say otherwize...

here's the code of the HTC component

<PUBLIC:COMPONENT tagName="editBox">
<PUBLIC:DEFAULTS viewLinkContent/>
<PUBLIC:METHOD NAME="initEditBox" />
<PUBLIC:PROPERTY ID="editorSize" NAME="editorSize" PUT="setEditorSize" />
<PUBLIC:PROPERTY ID="boxContent" NAME="boxContent" PUT="setBoxContent" GET="getBoxContent" />

<STYLE>
.buttonClass
{
    BORDER-RIGHT: #d6d3ce 1px solid;
    BORDER-TOP: #d6d3ce 1px solid;
    BORDER-LEFT: #d6d3ce 1px solid;
    BORDER-BOTTOM: #d6d3ce 1px solid;
}
.tdClass
{
    PADDING-LEFT: 7px;
    PADDING-TOP: 1px;    
}
.Divider
{
    BORDER-RIGHT: #ffffff 1px solid;
    BORDER-TOP: #bbbbbb 1px solid;
    BORDER-LEFT: #bbbbbb 1px solid;
    WIDTH: 2px;
    BORDER-BOTTOM: #ffffff 1px solid;
    HEIGHT: 30px;
    BACKGROUND-COLOR: #dddddd;
}
</STYLE>
<SCRIPT LANGUAGE="Javascript">

//*****************************************
//PRIVATE VARIABLES
//*****************************************
var intEditorSize = 3;            //1-small; 2-medium; 3-large (default)
var viewMode = 1;                  // 1-WYSIWYG ; 2-HTML
var strBoxContent = '';            //content of editbox

//INITIALIZE ROW STRINGS
//table for the editor
var strRowToolbox1 = '<table width=100% border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE">\n' +
                              '<tr><td class="tdClass" id="composerCtrls">';
//font list                                    
var strRowToolbox2 = '<!--FONT LIST-->' +      
                              '<div onclick="hideFontList();" id="lstFont" name="lstFont" align=left style="height:180; width:121; top:30px; left:15px; background-color:white; position:absolute; border:#737373 solid 1px; visibility:hidden; z-index=100">\n' +
                              '<table width=100% cellpadding=5 cellspacing=0 border=0>\n' +
                              '<tr><td onmouseover="this.style.backgroundColor=\'#dddddd\';window.status=\'\';return true;" onMouseOut="this.style.backgroundColor=\'white\';"><font face=\'arial\' size=-1><a href="#" onclick="javascript:changeFont(\'arial\');" style="text-decoration:none;color:black;width:100%;">Arial</a></font></td></tr>\n' +
                              '<tr><td onmouseover="this.style.backgroundColor=\'#dddddd\';window.status=\'\';return true;" onMouseOut="this.style.backgroundColor=\'white\';"><font face=\'arial narrow\' size=-1><a href="#" onclick="javascript:changeFont(\'arial narrow\');" style="text-decoration:none;color:black;width:100%;">Arial Narrow</a></font></td></tr>\n' +
                              '<tr><td onmouseover="this.style.backgroundColor=\'#dddddd\';window.status=\'\';return true;" onMouseOut="this.style.backgroundColor=\'white\';"><font face=\'arial black\' size=-1><a href="#" onclick="javascript:changeFont(\'arial black\');" style="text-decoration:none;color:black;width:100%;width:100%;">Arial Black</a></font></td></tr>\n' +                                    
                              '<tr><td onmouseover="this.style.backgroundColor=\'#dddddd\';window.status=\'\';return true;" onMouseOut="this.style.backgroundColor=\'white\';"><font face=\'courier\' size=-1><a href="#" onclick="javascript:changeFont(\'courier\');" style="text-decoration:none;color:black;width:100%;">Courier</a></font></td></tr>\n' +
                              '<tr><td onmouseover="this.style.backgroundColor=\'#dddddd\';window.status=\'\';return true;" onMouseOut="this.style.backgroundColor=\'white\';"><font face=\'system\' size=-1><a href="#" onclick="javascript:changeFont(\'system\');" style="text-decoration:none;color:black;width:100%;">System</a></font></td></tr>\n' +
                              '<tr><td onmouseover="this.style.backgroundColor=\'#dddddd\';window.status=\'\';return true;" onMouseOut="this.style.backgroundColor=\'white\';"><font face=\'times new roman\' size=-1><a href="#" onclick="javascript:changeFont(\'times new roman\');" style="text-decoration:none;color:black;width:100%;">Times New Roman</a></font></td></tr>\n' +
                              '<tr><td onmouseover="this.style.backgroundColor=\'#dddddd\';window.status=\'\';return true;" onMouseOut="this.style.backgroundColor=\'white\';"><font face=\'verdana\' size=-1><a href="#" onclick="changeFont(\'verdana\');" style="text-decoration:none;color:black;width:100%;">Verdana</a></font></td></tr>\n' +
                              '</table>\n' +      
                              '</div>\n\n' +
                              '<!-- TOOLBOX -->\n' +                                    
                              '<img alt="Font" class="buttonClass" src="../images/font.gif" ondrag="return false;" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onclick="showFontList();" WIDTH="22" HEIGHT="22">\n' +
                              '<span class="Divider"></span>';
//span of toolbox commands
var strRowToolbox3 = '<span onclick="hideFontList();">';
//bold/underline/italics
var strRowToolbox4 = '<img alt="Bold" class="buttonClass" src="../images/bold.gif" ondrag="return false;" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="formatText(\'bold\')" WIDTH="23" HEIGHT="22">\n' +
                              '<img alt="Italic" class="buttonClass" src="../images/italic.gif" ondrag="return false;" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="formatText(\'italic\')" WIDTH="23" HEIGHT="22">\n' +
                              '<img alt="Underline" class="buttonClass" src="../images/underline.gif" ondrag="return false;" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="formatText(\'underline\')" WIDTH="23" HEIGHT="21">\n' +
                              '<span class="Divider"></span>';
//others toolbar options
var strRowToolbox5 = '<img alt="Left" class="buttonClass" src="../images/left.gif" ondrag="return false;" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="formatText(\'justifyleft\')" WIDTH="23" HEIGHT="22">\n' +
                              '<img alt="Center" class="buttonClass" src="../images/center.gif" ondrag="return false;" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="formatText(\'justifycenter\')" WIDTH="23" HEIGHT="22">\n' +
                              '<img alt="Right" class="buttonClass" src="../images/right.gif" ondrag="return false;" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="formatText(\'justifyright\')" WIDTH="23" HEIGHT="22">\n' +
                              '<span class="Divider"></span>\n\n' +
                              '<img alt="Decrease Indent" class="buttonClass" src="../images/outdent.gif" ondrag="return false;" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="formatText(\'outdent\')" WIDTH="22" HEIGHT="22">\n' +
                              '<img alt="Increase Indent" class="buttonClass" src="../images/indent.gif" ondrag="return false;" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="formatText(\'indent\')" WIDTH="22" HEIGHT="22">\n' +      
                              '<span class="Divider"></span>\n\n' +
                              '<img alt="Create Hyperlink" class="buttonClass" src="../images/link.gif" ondrag="return false;" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="formatText(\'createlink\')" WIDTH="23" HEIGHT="22">\n' +
                              '<span class="Divider"></span>';
//closes section 3
var strRowToolbox6 = '</span>';
//closes section 1
var strRowToolbox7 = '</table>';
 //Toggle View
var strRowToggle =  '<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE">\n' +
                              '<td class="tdClass" align="left">\n' +
                              '<img ondrag="return false;" onclick="hideFontList();ToggleView();" alt="Toggle Mode" class="buttonClass" src="../images/mode.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" WIDTH="23" HEIGHT="22">\n' +
                              '<span class="Divider"></span>\n' +
                              '</td>\n' +
                              '</table>';
                                                            
//*****************************************
//PUBLIC PROPERTIES
//*****************************************
function setEditorSize(vValue){
      intEditorSize = vValue;
}
function setBoxContent(vValue){
      strBoxContent = vValue;
      composer.innerHTML = strBoxContent;
}
function getBoxContent(){
      strBoxContent = composer.innerHTML;
      return strBoxContent;
}
//*****************************************
//END - PUBLIC PROPERTIES
//*****************************************

//*****************************************
//PUBLIC METHODS
//*****************************************
function initEditBox(){                              
      //Ensure that all document elements except the content editable DIV are unselectable.
      for (i=0; i<document.all.length; i++)
            document.all(i).unselectable = "on";      
      composer.unselectable = "off";
      
      //Clear any text in the Document window and set the focus.
      composer.innerHTML = "";
            
      //Toolbox Compact Mode
      if (intEditorSize == 1){
            //render toolbox row
            rowToolbox.innerHTML = strRowToolbox1 + '\n' +
                                                strRowToolbox3 + '\n' +
                                                strRowToolbox4 + '\n' +
                                                strRowToolbox6 + '\n' +
                                                strRowToolbox7;
            //set height of editor
            composer.style.height = "25";
      }
      else
      if (intEditorSize == 2){
            //render toolbox row
            rowToolbox.innerHTML = strRowToolbox1 + '\n' +
                                                strRowToolbox2 + '\n' +
                                                strRowToolbox3 + '\n' +
                                                strRowToolbox4 + '\n' +
                                                strRowToolbox5 + '\n' +
                                                strRowToolbox6 + '\n' +
                                                strRowToolbox7;
            //set height of editor
            composer.style.height = "148"; //minimum size
            
            //render toggle view
            rowToggle.innerHTML = strRowToggle;
      }
      else
      if (intEditorSize == 3){
            //render toolbox row
            rowToolbox.innerHTML = strRowToolbox1 + '\n' +
                                                strRowToolbox2 + '\n' +
                                                strRowToolbox3 + '\n' +
                                                strRowToolbox4 + '\n' +
                                                strRowToolbox5 + '\n' +
                                                strRowToolbox6 + '\n' +
                                                strRowToolbox7;
            //set height of editor
            composer.style.height = "200";
            
            //render toggle view
            rowToggle.innerHTML = strRowToggle;      
      }
}
//*****************************************
//END - PUBLIC METHODS
//*****************************************

//*****************************************
//TOOLBOX FUNCTIONS
//*****************************************
//switch View (HTML, WYSIWYG)
function ToggleView(){
      var iHTML;
      var iText;
    if (viewMode == 1){
      iHTML = composer.innerHTML;
      composer.innerText = iHTML;           
      // Hide all controls
      composerCtrls.style.display = 'none';  
      composer.focus();      
      viewMode = 2; // Code
    }
    else {
      iText = composer.innerText;
      composer.innerHTML = iText;      
      // Show all controls
      composerCtrls.style.display = 'inline';      
      composer.focus();
      viewMode = 1; // WYSIWYG
    }  
 }            
//mouseover
function selOn(ctrl){
      ctrl.style.borderColor = '#000000';
      ctrl.style.backgroundColor = '#B5BED6';
      ctrl.style.cursor = 'hand';      
}
//mouseout
function selOff(ctrl){
      ctrl.style.borderColor = '#D6D3CE';  
      ctrl.style.backgroundColor = '#D6D3CE';
}
//onmousedown (click)
function selDown(ctrl){
      ctrl.style.backgroundColor = '#8492B5';                  
}
//onmouseup
function selUp(ctrl){      
      ctrl.style.backgroundColor = '#B5BED6';
}
//hide font list
function hideFontList(){
      //this function is called in the onclick events of the editor and fontlist
      
      //you have to set the editable prop dynamically to enable the
      //editor properly. if not done, the contents will not be selectable.
      composer.contentEditable = "True";
      
      if (intEditorSize == 2 | intEditorSize == 3){
            var myFrame = document.getElementById("lstFont");      
            if (myFrame.style.visibility = 'visible'){      
                  myFrame.style.visibility = 'hidden';
            }
            composer.focus();
      }

}      
//execute toolbar commands
function formatText(formatType){
      hideFontList();
      composer.focus();
      composer.document.execCommand(formatType);
}
//execute toolbar commands
function changeFont(fontFamily){
      composer.document.execCommand('fontname', false, fontFamily);
}
//show font list      
function showFontList(){
      var myFrame = document.getElementById("lstFont");
      
      if (myFrame.visibility == 'visible')
            myFrame.style.visibility = 'hidden'
      else
            myFrame.style.visibility = 'visible';
}
//*****************************************
//END - TOOLBOX FUNCTIONS
//*****************************************
</SCRIPT>
<table width=100% border="1" cellspacing="0">
      <tr><td id=rowToolbox>
            <!--DYNAMICALLY POPULATE THIS SECTION TO AVOID UNNECESSARY SCROLL BARS-->
            </td>
      </tr>      
      <tr><td>
            <!--EDITOR-->
            <div onclick="hideFontList();" id="composer" style="height:25; width:100%; background-color:white; font-face:Arial; font-size:14; padding:3; overflow=auto;">
            </div>
            </td>
      </tr>
      <tr><td id=rowToggle>
            <!--DYNAMICALLY POPULATE THIS SECTION TO AVOID UNNECESSARY SCROLL BARS-->
            </td>
      </tr>
</table>
</PUBLIC:COMPONENT>

Instantiate this editBox.htc by doing this:

1.      Assign a namespace for the component.  This can be any name.
<html xmlns:htmlcomposer>

2.      Reference the component by importing the behavior file located at the common folder of the application.
<?IMPORT namespace="htmlcomposer" implementation="composer.htc">

3.      Instantiate the component by using its namespace and the component’s tagName (editBox). Assign a name ,id, and a tabIndex for the object.  
<htmlcomposer:editBox id="composer" name="composer" tabindex="1"></htmlcomposer:editBox>

You can also instantiate several HTML Editor components in a single page.  Just make its id and name properties unique.

4.      Initialize the object by setting its editorSize property first, then call its initEditBox method.  You can do this after the </html> tag.  Place this inside a <script language=javascript> tag.
composer.editorSize = 3; //1 - small, 2-medium, 3-large
composer.initEditBox();

5.      You can initialize the contents of the HTML Editor through its boxContent property.    Place this inside a <script language=javascript> tag.  You can also use this property to retrieve the contents anytime during runtime (client-side scripting only).
composer.boxContent = document.frmFormOverview.hdnAIF.value;