Click here to Skip to main content
13,085,613 members (60,176 online)
Click here to Skip to main content
Add your own
alternative version


17 bookmarked
Posted 4 Oct 2007

Javascript to highlight a textbox when focused

, 4 Oct 2007
Rate this:
Please Sign up or sign in to vote.
JavaScript to highlight a textbox when it gets focus.


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.


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) = "Red";


    function fnTXTLostFocus(varname)
        var objTXT = document.getElementById(varname) = "White";

    function fnOnLoad()
        var t = document.getElementsByTagName('INPUT');
        var 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+ "')"));

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

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.


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
No Biography provided

You may also be interested in...

Comments and Discussions

Generalthere is another way to do this ... Pin
georg waechter4-Oct-07 6:45
membergeorg waechter4-Oct-07 6:45 
GeneralRe: there is another way to do this ... Pin
Mike Ellison4-Oct-07 7:35
memberMike Ellison4-Oct-07 7:35 
GeneralRe: there is another way to do this ... Pin
Nital Soni15-Oct-07 21:12
memberNital Soni15-Oct-07 21:12 
GeneralRe: there is another way to do this ... Pin
Mike Ellison16-Oct-07 2:16
memberMike Ellison16-Oct-07 2:16 
GeneralTo work in firefox Pin
Xnath4-Oct-07 6:36
memberXnath4-Oct-07 6:36 
GeneralRe: To work in firefox Pin
arcovoltaico7710-Oct-07 22:09
memberarcovoltaico7710-Oct-07 22:09 

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

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.170813.1 | Last Updated 4 Oct 2007
Article Copyright 2007 by Nital Soni
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid