Tech Off Thread

10 posts

Javascript added via TextBox.Attributes.Add()?

Back to Forum: Tech Off
  • User profile image
    jsampsonPC

    So I'm trying to add some client-side UI-glamor to my webform here. I cannot add javascript into the HTML tag since it's not really an HTML tag - asp:TextBox. So I have resorted to added it through the .Add() method of the .Attributes collection, but it's quickly started to look rather nasty. Is there a better way to do this?

    txtUsername.Attributes.Add("onclick", "if(this.value=='Username'){this.value='';this.style.color='black';this.style.fontStyle='normal';}");

    txtUsername.Attributes.Add("onblur", "if(this.value==''){this.value='Username';this.style.color='#666';this.style.fontStyle='italic';}");

  • User profile image
    Sven Groot

    You could create a class that inherits from TextBox that adds the script. Might be worth it if you have a lot of controls that need the same script.

    Otherwise what you're doing is pretty much the only way.

  • User profile image
    Lee_Dale

    The only other way I can think of is to use web resources to organize the scripts into a resource and package teh resource up into the assembly?

    Seems a bit overkill though Perplexed

  • User profile image
    Ion Todirel

    It doesn't make sense to do a control only for that. If you only have one textbox that behaves like that, the method you described is the best way to go.

  • User profile image
    littleguru

    Or you add the onclick to the textbox in the markup...

    <asp:TextBox runat="server" id="fooTextBox" onclick="... code here ..." />

    The ASP.NET controls have a feature to automatically put the unrecognized attributes into the final HTML markup... In this case it means that onClick is no property of the TextBox control and in that case threaten as HTML attribute and put on the final input tag.

  • User profile image
    jsampsonPC

    Interesting, LittleGuru - thanks for the insight.

  • User profile image
    littleguru

    jsampsonPC wrote:
    Interesting, LittleGuru - thanks for the insight.


    No problems jonathan. You are always welcome Smiley

  • User profile image
    Ion Todirel

    littleguru wrote:
    <asp:TextBox runat="server" id="fooTextBox" onclick="... code here ..." />
    yes but that will cause ASP.NET validation errors in aspx pages

    jsampsonPC wrote:
    Interesting, LittleGuru - thanks for the insight.
    see IAttributeAccesor for more details

  • User profile image
    erik_

    Add an css class to it and do it with javascript.

    something like:

    window.onload = function() {
    var elements = getAllElementsByName('input');

    for(var i=0;i<elements.length;i++) {

    if (i.class.contains('inputcontrol')) {

    i.onblur = function() {
    // style blabla
    }

    i.onclick = function() {
    // style blabla
    }

    }

    }

    }

    or create generic javascript methods which take as input the input element and add the events to it. So you can activate it by adding script tags and use textBox1.ClientControlID to output the id of the element.

  • User profile image
    JChung2006

    erik_ wrote:
    

    Add a CSS class to it and do it with javascript.

    Something like:

    window.onload = function() {
    var elements = getAllElementsByName('input');
    for (var i = 0; i < elements.length; i++) {
    if (i.class.contains('inputcontrol')) {
    i.onblur = function() {
    // style blabla
    }
    i.onclick = function() {
    // style blabla
    }
    }
    }
    }

    Or create generic JavaScript methods which take as input the input element and add the events to it. So you can activate it by adding script tags and use textBox1.ClientControlID to output the id of the element.

    ASP.NET Futures has CSS selector query functionality to enable this sort of thing with a lot less messy JavaScript, similar to how it is done in JavaScript libraries like jQuery.

    Here's some jQuery JavaScript to illustrate. The ASP.NET Futures version is similar except it uses W3C DOM recommended syntax for the CSS selector query.

    $().ready(function()
    {
    // $("input.inputcontrol") for erik_'s example
    $("#txtUsername").bind("focus", function()
    {
    if ($(this).val() == "Username")
    {
    $(this).val("");
    $(this).css({ color: "#000", fontStyle: "normal" });
    }
    }
    );
    $("#txtUsername").bind("blur", function()
    {
    if ($(this).val() == "")
    {
    $(this).val("Username");
    $(this).css({ color: "#666", fontStyle: "italic" });
    }
    }
    );
    })

    P.S. jsampsonPC, you should capture "focus" instead of "click" to handle the case where a user tabs into your Username textbox instead of clicking on it.

Comments closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.