Click here to Skip to main content
15,867,895 members
Articles / Programming Languages / Javascript

Javascript to highlight a textbox when focused

Rate me:
Please Sign up or sign in to vote.
3.75/5 (3 votes)
4 Oct 2007CPOL 83.4K   478   17   6
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..

JavaScript
<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)


Written By
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Generalthere is another way to do this ... Pin
georg waechter4-Oct-07 6:45
georg waechter4-Oct-07 6:45 
GeneralRe: there is another way to do this ... Pin
Mike Ellison4-Oct-07 7:35
Mike Ellison4-Oct-07 7:35 
GeneralRe: there is another way to do this ... Pin
Nital Soni15-Oct-07 21:12
Nital Soni15-Oct-07 21:12 
GeneralRe: there is another way to do this ... Pin
Mike Ellison16-Oct-07 2:16
Mike Ellison16-Oct-07 2:16 
GeneralTo work in firefox Pin
Xnath4-Oct-07 6:36
Xnath4-Oct-07 6:36 
GeneralRe: To work in firefox Pin
arcovoltaico7710-Oct-07 22:09
arcovoltaico7710-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.