Click here to Skip to main content
Click here to Skip to main content

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.

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

Comments and Discussions

 
Generalthere is another way to do this ... Pinmembergeorg waechter4-Oct-07 6:45 
GeneralRe: there is another way to do this ... PinmemberMike Ellison4-Oct-07 7:35 
GeneralRe: there is another way to do this ... PinmemberNital Soni15-Oct-07 21:12 
GeneralRe: there is another way to do this ... PinmemberMike Ellison16-Oct-07 2:16 
GeneralTo work in firefox PinmemberXnath4-Oct-07 6:36 
GeneralRe: To work in firefox Pinmemberarcovoltaico7710-Oct-07 22:09 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 4 Oct 2007
Article Copyright 2007 by Nital Soni
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid