Click here to Skip to main content
Click here to Skip to main content
Search within:



 
Comments & Discussions (6)

Javascript to highlight a textbox when focused

By , 4 Oct 2007
 

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:

  1. Finds the list of textboxes and stores it in an array.
  2. 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 India
Member
No Biography provided

Article Top
 
Sign Up to vote   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.
Search this forum  
    Spacing  Noise  Layout  Per page   
First Prev Next
Generalthere is another way to do this ...membergeorg waechter4 Oct '07 - 6:45 
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
GeneralRe: there is another way to do this ...memberMike Ellison4 Oct '07 - 7:35 
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
GeneralRe: there is another way to do this ...memberNital Soni15 Oct '07 - 21:12 
It doesn't support any version of IE... Big Grin | :-D
 
Nital Soni
Sign In·View Thread·Permalink
GeneralRe: there is another way to do this ...memberMike Ellison16 Oct '07 - 2:16 
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
GeneralTo work in firefoxmemberXnath4 Oct '07 - 6:36 
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);}
}
}
}
Sign In·View Thread·Permalink
GeneralRe: To work in firefoxmemberarcovoltaico7710 Oct '07 - 22:09 
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>

Sign In·View Thread·Permalink
Last Visit: 31 Dec '99 - 18:00     Last Update: 24 May '13 - 16:43Refresh1

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

About Article
JavaScript to highlight a textbox when it gets focus.
Type Article
Licence CPOL
First Posted 4 Oct 2007
Views 53,850
Downloads 333
Bookmarked 15 times

, +
Top News

Old Japanese Man Creates Amazing Art Using Excel (Wait, Excel?)

Get the Insider News free each morning.
Related Videos
JavaScript Programming - 0205 When Not To Use JavaScript
JavaScript Programming - 0203 When Does JavaScript Run?
Using AvalonEdit (WPF Text Editor)
How to Change the Class Attribute of an Element using JavaScript
A post about Silverlight Focusing Issue
Maintain focus between postbacks in ASP.NET 2.0, also in ASP.NET AJAX
Facelift to Forms; Part 1: TextBox - By Jay@Thakar.info
Mask TextBox ASP.NET Control
Change Textbox/Input background color on focus
Restricting input by MaskEdit in IE / Firefox
Creating a watermark ("") textbox control
How To set Default Button for ENTER key pressed event, and How To set Focus on a particular Control when Page loads, and How To Shift Focus from One Control To Another when TAB key is pressed
AJAX-enabled Name Selector User Control
Auto-complete Control
Enhanced Validation and Extending ASP .NET Forms
AJAX WAS Here - Part 3 : Auto Complete TextBox
Validating Accordion and RadPanelBar using Ajax and Focusing Ajax Callout Messages to the Correct Position
Syntax highlighting textbox written in C#
From Simple JavaScript Classes to ASP.NET AJAX Controls
Regular Expressions Syntax Highlighting
How to Prevent a Drag and Drop Text and Copy Paste Text in your textbox Control
MultiDropDown v2: A Multiple Selection Dropdown Control for ASP.NET
Permalink | Advertise | Privacy | Mobile
Web02 | 2.6.130523.1 | Last Updated 4 Oct 2007
Article Copyright 2007 by Nital Soni
Everything else Copyright © CodeProject, 1999-2013
Terms of Use
Layout: fixed | fluid