Javascript to highlight a textbox when focused

Download source code - 1.1 KB

Introduction

This article shows JavaScript code to highlight a textbox when it gets the focus. The JavaScript highlights the textbox when the cursor is focused on it.

Background

This article describes how to attach events dynamically.

Using the code

Following is the JavaScript to attach an event dynamically at the time of page loading..

<script language="javascript" type="text/javascript">
    function fnTXTFocus(varname)
    {

        var objTXT = document.getElementById(varname)
        objTXT.style.borderColor = "Red";

    }

    function fnTXTLostFocus(varname)
    {
        var objTXT = document.getElementById(varname)
        objTXT.style.borderColor = "White";
    }

    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("fnTXTFocus('"+t[i].id+ "')"));
                t[i].attachEvent('onblur', new Function("fnTXTLostFocus('"+t[i].id+ "')"));
            }
        }
    }
</script>

<body onload="fnOnLoad()">
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    UserName ::
                </td>
                <td>
                    <asp:TextBox ID="txtUN" runat="server" ></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    Password :: 
                </td>
                <td>
                    <asp:TextBox ID="txtPwd" runat="server" ></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    Confirm Password :: 
                </td>
                <td>
                    <asp:TextBox ID="txtCpwd" runat="server" ></asp:TextBox>
                </td>
            </tr>
            
            
        </table>
    </div>
    </form>
</body>

The above JavaScript:

Finds the list of textboxes and stores it in an array.
Attaches the OnFocus and OnBlur events to each textbox in the list.

So now, whenever a textbox gets/loses focus, the assigned function will fire.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Nital Soni

India

Member

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

You must Sign In to use this message board. (secure sign-in)

Search this forum
	Profile popups Noise Layout Per page

there is another way to do this ...

georg waechter

6:45 4 Oct '07

much more simple and effective would be to use a CSS style sheet: `input[type=text]:focus { border: solid 2px #9AAE44; background: #eee; }` But sadly not many browsers support this today.
Sign In·View Thread·Permalink	5.00/5 (2 votes)

Re: there is another way to do this ...

Mike Ellison

7:35 4 Oct '07

That's a neat tip. georg waechter wrote: But sadly not many browsers support this today. It worked for me in FireFox 2.x but not in IE 7... does IE 7 not support `:focus` in css?
Sign In·View Thread·Permalink

Re: there is another way to do this ...

Nital Soni

21:12 15 Oct '07

It doesn't support any version of IE... Nital Soni
Sign In·View Thread·Permalink

Re: there is another way to do this ...

Mike Ellison

2:16 16 Oct '07

Nital Soni wrote: It doesn't support any version of IE... You might want to have that statement in your article. Your javascript technique is a good workaround for this lack of css support in IE - that would have been nice to read in your introduction or background sections.
Sign In·View Thread·Permalink

To work in firefox

Xnath

6:36 4 Oct '07

I did a small edit so it will work in Firefox.

function fnOnLoad()

        {

            var t = document.getElementsByTagName('input');

            var i;

            for(i = 0; i < t.length; i++)

            {

                if(t[i].type == "text")

                {

                    try

                    {

                        if(t[i].addEventListener){ // Mozilla, Netscape, Firefox

	                        t[i].addEventListener('focus', new Function("fnTXTFocus('"+ t[i].id + "')"), false);

	                        t[i].addEventListener('blur', new Function("fnTXTLostFocus('" + t[i].id + "')"), false);

                        } else { // IE

	                        t[i].attachEvent('onfocus', new Function("fnTXTFocus('"+ t[i].id + "')"), false);

	                        t[i].attachEvent('onblur', new Function("fnTXTLostFocus('" + t[i].id + "')"), false);

                        }

                    }

                    catch (exp)

                    {alert (exp);}

                }

            }

        }

Re: To work in firefox

arcovoltaico77

22:09 10 Oct '07

I did a small mod to make it work without asp:textbox, but with simple html textbox. Tested on IE6 and Firefox 2.0.0

<script language="javascript" type="text/javascript">
        function fnTXTFocus(varname)
        {
 
            var objTXT = document.getElementById(varname)
            objTXT.style.borderColor = "Red";
 
        }
 
        function fnTXTLostFocus(varname)
        {
            var objTXT = document.getElementById(varname)
            objTXT.style.borderColor = "White";
        }
 
function fnOnLoad()
{
	var t = document.getElementsByTagName('input');
	var i;
	for(i = 0; i < t.length; i++)
	{
		if(t[i].type == "text")
		{
			try
			{
				if(t[i].addEventListener)
				{ // Mozilla, Netscape, Firefox
					t[i].addEventListener('focus', new Function("fnTXTFocus('"+ t[i].id + "')"), false);
					t[i].addEventListener('blur', new Function("fnTXTLostFocus('" + t[i].id + "')"), false);
				} 
				else 
				{ // IE
					t[i].attachEvent('onfocus', new Function("fnTXTFocus('"+ t[i].id + "')"), false);
					t[i].attachEvent('onblur', new Function("fnTXTLostFocus('" + t[i].id + "')"), false);
				}
			}
			catch (exp)
			{
				alert (exp);
			}
		}
	}
} 
    </script>
 

<body  önload="fnOnLoad()">
    <form id="form1">
    
        
            
                
                    UserName ::
                
                                    
                    <input type="text" ID="txtUN" value="user">
                
            
            
                
                    Password :: 
                
                                    
                    <input type="text" ID="txtPwd" value="passwd">
                
            
            
                
                    Confirm Password :: 
                
                                    
                    <input type="text" ID="txtCpwd" value="Cpasswd">
                
                                    
        
    
    </form>
</body>