JavaScript 在获得焦点时高亮显示文本框

Nital Soni

3.75/5 (3投票s)

2007年10月4日

CPOL

84290

494

JavaScript 实现当文本框获得焦点时高亮显示。

下载源代码 - 1.1 KB

引言

本文档展示了 JavaScript 代码，用于在文本框获得焦点时高亮显示。当光标聚焦在文本框上时，JavaScript 会高亮显示该文本框。

背景

本文档描述了如何动态地附加事件。

使用代码

以下是页面加载时动态附加事件的 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>

上述 JavaScript 代码

查找文本框列表并将其存储在数组中。
将 OnFocus 和 OnBlur 事件附加到列表中的每个文本框。

因此，每当文本框获得或失去焦点时，分配的函数将被触发。