Demonstration of problems with cursor placement

  •  07-04-2007, 10:16 PM

    Demonstration of problems with cursor placement

    This message demonstrates the problem two different ways: 1) on your site, and 2) on a site we've set up to show a different version of the same problem:

    I. To see the problem on your site:
     
    1. Go to http://cutesoft.net/example/Online-email.aspx
    2. Click on the image in the body and delete it.
    3. Click into the "To:" edit box.
    4. Press your tab key. You can see that the bounding body (content) area is selected but no cursor is displayed inside the body even though it should display.
    5. Without clicking into the body, start typing and the cursor will magically appear. Note, however, that the bounding area will incorrectly still be selected even while you are typing.
    6. Now click into the body and the selected bounding area will be deselected and the cursor will correctly be in the body.
     
    There are several problems demonstrated here:
    1. The cursor never displays in the body until you actual mouse-click into it.
    2. Tabbing causes the bounding area to be selected, but there is no indication that the user could then start typing.
    3. Once the user does start typing, the bounding area is deselected.

    II. To see a worse version of the problem using the downloaded current version. Note: this uses the example provided in the download, with the only changes being adding the text box and setting the text box's tabindex to 1 and the CE's tabindex to 2. It is exactly the way the download delivers it:

    1. Go to http://cuteeditor.qasper000001.com/default.aspx
    2. Click into the box beside the words "This example show you all the predefined buttons".
    3. Press your tab key. You can see that the outer area is selected but the inner body area is not selected, nor is the cursor in the body.
    4. Try tabbing again. The highlighting disappears and so does the cursor. But you still cannot type in the body area.
     
    You need to specifically click into the body to enter content.
     
    Can you please tell me how to fix these issues?
     
    Thank you.
     
    Here is the default.aspx page we posted:
     

    <%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>
    <%@ Register TagPrefix="cutesoft" TagName="leftmenu" Src="leftmenu.ascx" %>
    <%@ Register TagPrefix="cutesoft" TagName="banner" Src="banner.ascx" %>
    <%@ Page Language="vb" CodeBehind="Default.aspx.vb" AutoEventWireup="false" Inherits="Cute_Editor_V6_Updated._Default" %>
    <HTML>
     <HEAD>
      <title>ASP and ASP.NET WYSIWYG Editor - Default Configuration </title>
      <link rel="stylesheet" href="../example.css" type="text/css">
     </HEAD>
     <body>
      <form runat="server">
       <cutesoft:banner id="banner1" runat="server" />
       <table>
        <tr>
         <td valign="top" nowrap id="leftcolumn" width="160">
          <cutesoft:leftmenu id="leftmenu1" runat="server" />
         </td>
         <td width="20" nowrap></td>
         <td valign="top" width="760">
          <h1>Enable All Toolbars</h1>
          This example show you <b>all the predefined buttons</b>.
          <asp:TextBox id="TextBox1" tabIndex="1" runat="server"></asp:TextBox>
          <br>
          <br>
          <asp:radiobuttonlist id="ConfigureList" runat="server" autopostback="True" RepeatDirection="Horizontal"
           onselectedindexchanged="Configure_Changed">
           <asp:ListItem value="Full" Selected="True">Full</asp:ListItem>
           <asp:ListItem value="Full_noform">Full_noform</asp:ListItem>
           <asp:ListItem value="Compact">Compact</asp:ListItem>
           <asp:ListItem value="Simple">Simple</asp:ListItem>
           <asp:ListItem value="Minimal">Minimal</asp:ListItem>
           <asp:ListItem value="None">None</asp:ListItem>
          </asp:radiobuttonlist>
          <CE:Editor id="Editor1" EditorWysiwygModeCss="example.css" runat="server" tabIndex="2">
           <FrameStyle Height="100%" BorderWidth="1px" BorderStyle="Solid" BorderColor="#DDDDDD" Width="100%"
            CssClass="CuteEditorFrame" BackColor="White"></FrameStyle>
          </CE:Editor><br>
          <asp:Button id="btnUpdate" onclick="Submit" Runat="server" Text="Show HTML"></asp:Button>
          <asp:Literal ID="Literal1" Runat="server" />
         </td>
        <tr>
        </tr>
       </table>
      </form>
      <script runat="server">
     Public Sub Page_Load(sender As object, e As System.EventArgs)
     
      If Page.IsPostBack Then
       Literal1.Text = "<h3>The HTML you typed is...</h3><br>"
       Literal1.Text += Server.HtmlEncode(Editor1.Text)
      Else
       Editor1.Text = "Type Here"
      End If
      
     End Sub

     public Sub Submit(sender As object, e As System.EventArgs)
      Literal1.Text = "<h2>The HTML you typed is...</h2><br>"
      Literal1.Text += Server.HtmlEncode(Editor1.Text)
     End Sub
     
     
     Private Sub Configure_Changed(ByVal sender As Object, ByVal e As System.EventArgs)
      
      Select ConfigureList.SelectedItem.Value.ToString()
       case "Full":
        Editor1.AutoConfigure  = AutoConfigure.Full
        Editor1.Width=Unit.Pixel(776)
        
       case "Compact":
        Editor1.AutoConfigure  = AutoConfigure.Compact
        Editor1.Width=Unit.Pixel(770)
        
       case "Full_noform":
        Editor1.AutoConfigure  = AutoConfigure.Full_noform
        Editor1.Width=Unit.Pixel(660)
        
       case "Simple":
        Editor1.AutoConfigure  = AutoConfigure.Simple
        Editor1.Width=Unit.Pixel(720)
        
       case "Minimal":
        Editor1.AutoConfigure  = AutoConfigure.Minimal
        Editor1.Width=Unit.Pixel(500)
        
       case "None":
        Editor1.AutoConfigure  = AutoConfigure.None
        Editor1.Width=Unit.Pixel(500)
      End Select  
        
     End Sub
      </script>
     </body>
    </HTML>

     
     
     
     
     
View Complete Thread