Cursor not displayed after adding RadFormDecorator

3 posts, 1 answers
  1. Paulo
    Paulo avatar
    31 posts
    Member since:
    Oct 2010

    Posted 16 Sep 2011 Link to this post

    Hello.

    In the following html page, the cursor is displayed in the login field when the page is loaded:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
        <title></title>
    </head>
    <body>
        <center>
        <form id="form1" runat="server" method="post" action="">
            <table style="background:#cccccc" cellpadding="2" cellspacing="3">
                <tr align="center">
                    <td></td>
                    <td align="right"><label>Login: </label></td>
                    <td align="left"><input type="text" id="login" style="width:140px" maxlength="30" /></td>
                    <td></td>
                </tr>
                <tr align="center">
                    <td></td>
                    <td align="right"><label>Password: </label></td>
                    <td align="left"><input type="text" id="password" style="width:140px" maxlength="30" /></td>
                    <td></td>
                </tr>
            </table>
            <br />
      
            <input type="button" value="Login" style="width:65px;" />
        </form>
        </center>
      
        <script type="text/javascript">
            document.forms["form1"]["login"].focus();
        </script>
    </body>
    </html>

    However, when the corresponding aspx page is loaded (with the RadFormDecorator component), the cursor is no longer displayed:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="MemberJoin._Default" %>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
    <head>
        <title></title>    
    </head>
    <body>
        <center>
        <form id="form1" runat="server" method="post" action="">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
            <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" />
              
            <table style="background:#cccccc" cellpadding="2" cellspacing="3">
                <tr align="center">
                    <td></td>
                    <td align="right"><label>Login: </label></td>
                    <td align="left"><input type="text" id="login" style="width:140px" maxlength="30" /></td>
                    <td></td>
                </tr>
                <tr align="center">
                    <td></td>
                    <td align="right"><label>Password: </label></td>
                    <td align="left"><input type="text" id="password" style="width:140px" maxlength="30" /></td>
                    <td></td>
                </tr>
            </table>
            <br />
              
            <input type="button" value="Login" style="width:65px;" onclick="validateLogin()" />
        </form>
        </center>
          
        <script type="text/javascript">
            document.forms["form1"]["login"].focus();
        </script>
    </body>
    </html>

    No methods have been implemented in the code behind.
    Why isn't the cursor being displayed?

    Thank you in advance.
    Paulo
  2. Answer
    Niko
    Admin
    Niko avatar
    387 posts

    Posted 20 Sep 2011 Link to this post

    Hi Paulo,

    This behavior can be observed only under IE browsers, versions below 9, where the rounded corners of the inputs are done through additional HTML/DOM elements. When the input is focused and after that changes position in the DOM tree, it loses that focus. Therefore you need to wait for the page to load and then set the focus. A small tweak is to force the select of the input so that you can be absolutely sure the cursor will appear. Here is a sample implementation for your case:
    function pageLoad()
    {
        $get("login").focus();
        $get("login").select();
    }
    Just replace your call to the focus method with this javascript snippet and you are good to go.

    Hope this helps.

    Greetings,
    Niko
    the Telerik team
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Paulo
    Paulo avatar
    31 posts
    Member since:
    Oct 2010

    Posted 20 Sep 2011 Link to this post

    Hello, Niko.

    Thank you for your reply.
    The problem has been solved.

    Paulo
Back to Top