Avatar of killer5
killer5 asked on

Unable to set focus on HTC div element

parent.asp
editBox.htc

I have a HTC component being instantiated in parent.asp.  The HTC has an editable DIV (myDIV.contentEditable = "True") and some buttons that formats the selected text inside the DIV element (Bold, Italic, Underline).

THE PROBLEM:
Once the page is loaded, the innerHTML of the editable DIV has a default value which consists of several paragraphs.  Some are left-aligned and some are right-aligned (do this when recreating the problem).  The first time I select text inside the div tag, no problem occurs.  But when I set the focus on a textbox in the parent.asp, then, go back to the editable DIV to select some texts, nothing happens; it is as if the editable DIV is disabled. :(

Has anyone encountered this before? What can be done in the HTC file for this to work properly?
Web Languages and StandardsWeb Development

Avatar of undefined
Last Comment
GoSu

8/22/2022 - Mon
ASKER
killer5

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

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

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>
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
ASKER
killer5

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;
ASKER CERTIFIED SOLUTION
GoSu

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question