www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: Change Textbox Style with Javascript?

  1. #1
    Join Date
    Oct 2009
    Posts
    17

    Exclamation Change Textbox Style with Javascript?

    I have a javascript file in .net that contains the following code
    Code:
    function DoBlur(fld) {
        fld.className = 'normalfld';
    }
    
    function DoFocus(fld) {
        fld.className = 'focusfld';
    }
    
    
    function fnOnLoad() {
        var t = document.getElementsByTagName('INPUT');
        var i;
        for (i = 0; i < t.length; i++) {
            if (t[i].type == "text") {
                t[i].attachEvent('onfocus', new Function("DoFocus('" + t[i].id + "')"));
                t[i].attachEvent('onblur', new Function("DoBlur('" + t[i].id + "')"));
            }
        }
    }
    For some reason I cant get it to work right. All i want to do is change the textbox styles when they get and loose focus.

    I made sure the css classes exists on the page but I cant get this javascript funciton to work for the life of me..

    I want to loop through all the textboxes add attach functiions to the onfocus and onblur events.. Anyone know where i went wrong?

    Thanks

    -Matt

  2. #2
    Join Date
    Aug 2005
    Location
    Northampton, UK.
    Posts
    421
    Hey,

    here:
    Code:
    t[i].attachEvent('onblur', new Function("DoBlur('" + t[i].id + "')"));
    you pass the ID of the input field...

    and here:
    Code:
    function DoFocus(fld) {
        fld.className = 'focusfld';
    }
    you use (the id).className

    You need to either change it to:
    Code:
    function DoFocus(fld) {
        document.getElementById(fld).className = 'focusfld';
    }
    or change the parameter input.

    Cheers,
    Jamey

  3. #3
    Join Date
    Oct 2009
    Posts
    17
    I cant get that to work either..

    Code:
    function DoBlur(fld) {
        //document.getElementById(fld).className = 'normalfld';
        document.getElementById(fld).borderColor = 'White';
    }
    
    function DoFocus(fld) {
        //document.getElementById(fld).className = 'focusfld';
        document.getElementById(fld).borderColor = 'Red';
    }
    
    
    function fnOnLoad() {
        var t = document.getElementsByTagName('INPUT');
        var i;
        for (i = 0; i < t.length; i++) {
            if (t[i].type == "text") {
                t[i].attachEvent('onfocus', new Function("DoFocus('" + t[i].id + "')"));
                t[i].attachEvent('onblur', new Function("DoBlur('" + t[i].id + "')"));
            }
        }
    }
    I have the body onload set like this <body onload="fnOnLoad()">

    Any ideas?

  4. #4
    Join Date
    Aug 2009
    Posts
    593
    Try this...

    Code:
    function DoBlur(fld) {
        //fld.className = 'normalfld';
        fld.style.borderColor = 'White';
    }
    
    function DoFocus(fld) {
        //fld.className = 'focusfld';
        fld.style.borderColor = 'Red';
    }
    
    function fnOnLoad() {
        var t = document.getElementsByTagName('INPUT');
        for (var i = 0; i < t.length; i++) {
            if (t[i].type == "text") {
                t[i].onfocus = function() {DoFocus(this);};
                t[i].onblur  = function() {DoBlur(this);};
            }
        }
    }
    Last edited by thraddash; 10-20-2009 at 05:07 PM.

  5. #5
    Join Date
    Oct 2009
    Posts
    17
    Thank you, but thats not working for me either....

  6. #6
    Join Date
    Aug 2009
    Posts
    593
    Then you have other problems, why dont you submit the html code as well?

  7. #7
    Join Date
    Aug 2009
    Posts
    593
    Ok, just for your information, this is how I have tested it:

    HTML Code:
    <!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" xml:lang="en" lang="en">
    	<head>
    		<title>Test</title>
    		<script type="text/javascript">
    			function DoBlur(fld) {
    			    //fld.className = 'normalfld';
    			    fld.style.borderColor = 'White';
    			}
    
    			function DoFocus(fld) {
    			    //fld.className = 'focusfld';
    			    fld.style.borderColor = 'Red';
    			}
    
    			function fnOnLoad() {
    			    var t = document.getElementsByTagName('INPUT');
    			    for (var i = 0; i < t.length; i++) {
    			        if (t[i].type == "text") {
    			            t[i].onfocus = function() {DoFocus(this);};
    			            t[i].onblur  = function() {DoBlur(this);};
    			        }
    			    }
    			}
    		</script>
    	</head>
    	<body onload="fnOnLoad();">
    
    		<input type="text" />
    		<input type="text" />
    		<input type="text" />
    		<input type="text" />
    
    	</body>
    </html>
    Before anyone mentions it, I do realise that doing a function assignment will replace the current function, but at least this will work in all browsers for the test.

  8. #8
    Join Date
    Oct 2009
    Posts
    17
    HTML Code:
    <&#37;@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="CellSavior.E911.Web.WebForm1" %>
    
    <!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 runat="server">
        <title></title>
        <script type="text/javascript">
            function DoBlur(fld) {
                //fld.className = 'normalfld';
                fld.style.borderColor = 'White';
            }
    
            function DoFocus(fld) {
                //fld.className = 'focusfld';
                fld.style.borderColor = 'Red';
            }
    
            function fnOnLoad() {
                var t = document.getElementsByTagName('INPUT');
                for (var i = 0; i < t.length; i++) {
                    if (t[i].type == "text") {
                        t[i].onfocus = function() { DoFocus(this); };
                        t[i].onblur = function() { DoBlur(this); };
                    }
                }
            }
        </script>
    </head>
    <body onload="fnOnLoad()">
        <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
            <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
            <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
            <asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
            <asp:TextBox ID="TextBox7" runat="server"></asp:TextBox>
        </div>
        </form>
    </body>
    </html>

  9. #9
    Join Date
    Aug 2009
    Posts
    593
    Is this the actual source code, or the code you see in the browsers (view source)?

    Quote Originally Posted by mattstacks View Post
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    This is not a proper <input> tag for the browser side, among other tags.

  10. #10
    Join Date
    Oct 2009
    Posts
    17
    No that was the source code..

    Here is the client side source

    HTML Code:
    
    <!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>
        <script type="text/javascript">
            function DoBlur(fld) {
                //fld.className = 'normalfld';
                fld.style.borderColor = 'White';
            }
    
            function DoFocus(fld) {
                //fld.className = 'focusfld';
                fld.style.borderColor = 'Red';
            }
    
            function fnOnLoad() {
                var t = document.getElementsByTagName('INPUT');
                for (var i = 0; i < t.length; i++) {
                    if (t[i].type == "text") {
                        t[i].onfocus = function() { DoFocus(this); };
                        t[i].onblur = function() { DoBlur(this); };
                    }
                }
            }
        </script>
    </head>
    <body onload="fnOnLoad();">
        <form name="form1" method="post" action="WebForm1.aspx" id="form1">
    <div>
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTI4NDM4OTY3NWRk/mgVe9WSjhSLlgZPz8V97QQMV+c=" />
    </div>
    
    
    <script src="Scripts/TBoxHighlighting.js" type="text/javascript"></script>
    <div>
    
    	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCALk157XBwLs0bLrBgLs0fbZDALs0Yq1BQLs0e58AuzRgtgJAuzRxsYPAuzR2qEI5g7EvbkHzw5+ueDgWgdkFWjprDA=" />
    </div>
        <div>
            <input name="TextBox1" type="text" id="TextBox1" />
            <input name="TextBox2" type="text" id="TextBox2" />
            <input name="TextBox3" type="text" id="TextBox3" />
            <input name="TextBox4" type="text" id="TextBox4" />
            <input name="TextBox5" type="text" id="TextBox5" />
            <input name="TextBox6" type="text" id="TextBox6" />
            <input name="TextBox7" type="text" id="TextBox7" />
        </div>
        </form>
    </body>
    </html>

  11. #11
    Join Date
    Aug 2009
    Posts
    593
    Strange, I just copied & pasted the client side code and it all worked, in IE, FireFox and Chrome?
    I don't see any validation errors in the html either?

    Are you sure there isn't some conflicting code in:

    HTML Code:
    <script src="Scripts/TBoxHighlighting.js" type="text/javascript"></script>

  12. #12
    Join Date
    Oct 2009
    Posts
    17
    Yeah, I removed that tag and it still dont work.
    Im using IE7

  13. #13
    Join Date
    Aug 2009
    Posts
    593
    You do actually click a textbox after the page has loaded right

    Otherwise, I'm a little stumped

  14. #14
    Join Date
    Oct 2009
    Posts
    17
    OMG! I totally thought it was supposed to happen on the mouse over! I really feel like a goof now. Sorry about that..

  15. #15
    Join Date
    Aug 2009
    Posts
    593
    LOL, I hope your not joking.

    You can use the onmouseover and onmouseout events for that

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles