Solved

Unable to set focus on HTC div element

Posted on 2004-04-01
5
869 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
  • 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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

705 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now