This is a migrated thread and some comments may be shown as answers.

Cursor not displayed after adding RadFormDecorator

2 Answers 87 Views

FormDecorator

This is a migrated thread and some comments may be shown as answers.

Paulo asked on 16 Sep 2011, 09:58 PM

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">

<html xmlns="http://www.w3.org/1999/xhtml" >

<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">

<html xmlns="http://www.w3.org/1999/xhtml" >

<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 Answers, 1 is accepted

Accepted

answered on 20 Sep 2011, 11:28 AM

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.