Solved

Unable to set focus on HTC div element

Posted on 2004-04-01
5
890 Views
Last Modified: 2013-11-19
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?
0
Comment
Question by:killer5
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 1

Author Comment

by:killer5
ID: 10739356
Can we put a code in the onclick event of the DIV element to put the cursor where the mouse is??
0
 
LVL 3

Expert Comment

by:GoSu
ID: 10753837
Post relevant code needed to recreate the problem. It's impossible to say otherwize...
0
 
LVL 1

Author Comment

by:killer5
ID: 10754681
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>
0
 
LVL 1

Author Comment

by:killer5
ID: 10754689
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;
0
 
LVL 3

Accepted Solution

by:
GoSu earned 500 total points
ID: 10758851
The problem is caused by Microsoft's failure to consistently format and describe htc's in their documentation.

You may already know this, but all htc's are actually full blown HTML pages loaded into memory. Now HTML documents (especially in IE) are pretty forgiving in their structure, and most of Micrsoft's examples are similar to your code. In my components I many times follow the same kind of conventions EXCEPT when it comes to ViewLink.

ViewLinked behaviors are prone to problems when you don't follow this structure in your htc.

<html>
    <head>
        <public:component ...>
            <public:property ... />
            <public:method .../>
            <public:event ... />
        </public:component>
        <style>...</style>
        <script> behavior related script goes here </script>
     </head>
    <body>
        Viewlinked HTML goes Here
    </body>
</html>

It's pretty much like a standard HTML page, with the public:component element only containing the interface definition of your behavior.

Reformat your htc to match this structure and your selection problem will go away.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question