CODEWITHSUNDEEP
c#javascriptasp.nettelerik
Nick V
Nick V

Reputation: 707

Javascript function works with onclick but not with onfocus

I have the following javascript function:

function makefieldlonger(element) {
    element.style.width = "550px";

}

And i call it with a RadTextBox control like this:

<telerik:RadTextBox ID="txtSubject" runat="server" EnableEmbeddedSkins="false"
                                    Skin="Default" Width="255px" onclick="makefieldlonger(this)"/>

This works, but i want this to happen in an onfocus event so i do the following:

<telerik:RadTextBox ID="txtSubject" runat="server" EnableEmbeddedSkins="false"
                                    Skin="Default" Width="255px" onfocus="makefieldlonger(this)"/>

But it refuses to adjust its size on the page. it does call the javascript function (i tested this by putting an alert in the function and it was called).

So the question is: why does this function work with an onclick event but not with an onfocus event?

Upvotes: 2

Views: 631

Answers (3)

Kamran Ajmal
Kamran Ajmal

Reputation: 302

Try using OnBlur() function. You are changing size of textbox on Focus event of that textbox that might cause this error. Use Onblur so that when control leave the Textbox onblur will fire and textbox will get changed

Upvotes: 0

Damith
Damith

Reputation: 63065

ASPX

<telerik:RadTextBox ID="txtSubject" runat="server" EnableEmbeddedSkins="false" Skin="Default" Width="255px" >
    <ClientEvents OnFocus="makefieldlonger" />
</telerik:RadTextBox>

OR You can use ClientEvents-OnFocus property to set the function as @Blade0rz comment

JavaScript

<script type="text/javascript">
    function makefieldlonger(sender, eventArgs)
    {
        sender._element.style.width = "550px";
    }
</script>

REF : RadControls for ASP.NET AJAX Documentation

Upvotes: 4

Mathew Thompson
Mathew Thompson

Reputation: 56429

It looks like OnFocus takes two arguments. I suspect element in your function is referring to the event arguments.

Try this (I made it as a ClientEvent):

<telerik:RadTextBox ID="txtSubject" runat="server" EnableEmbeddedSkins="false" Skin="Default" Width="255px">
    <ClientEvents OnFocus="makefieldlonger" />
</telerik:RadTextBox>

Then your function would be:

function makefieldlonger(sender, eventArgs) {
    sender.style.width = "550px";
}

Taken from the Telerik RadTextBox Documentation

Upvotes: 3

Related Questions