65.9K
CodeProject is changing. Read more.
Home

Javascript to highlight a textbox when focused

starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.75/5 (3 votes)

Oct 4, 2007

CPOL
viewsIcon

83992

downloadIcon

478

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.