如何在輸入文本字段或文本框中使用 javascript 或 JQuery 設置背景文本？

Question

我幾乎不知道任何 Jquery 或 Javascript。 所以，如果我非常愚蠢地問任何問題，請提前原諒。

我想為兩個文本字段設置背景文本。 我的兩個文本字段是

<asp:TextBox ID="txtFName" backgroundText="First Name" runat="server" Width="80px"  Style="float: left;"></asp:TextBox>
<asp:TextBox runat="server" ID="txtLName"  backgrountText="Last Name"
                                    Width="110px" Style="float: left"></asp:TextBox>

一位朋友為第一個文本框寫了 jquery，它運行良好。 這段代碼是

$(document).ready(function(){

        var inpName = $('#txtFName');
        var backgroundText = inpName.attr('backgroundText');

        inpName.val(backgroundText);

        inpName.focus(function(){
            if(inpName.val() == backgroundText) inpName.val('');
        }).blur(function(){
            if(inpName.val() == '') inpName.val(backgroundText);
        });


    }); 

但是，如果我將此代碼用於姓氏文本框，那么它不起作用，我復制了整個 Jquery 代碼並替換了var inpName = $('#txtFName'); as var inpName = $('#txtLName'); 但是，如果我這樣做，我的第一個工作文本框 (txtFirst) 確實可以正常工作。 但是，如果我這樣寫： $(document).ready(function(){ checkRequiredInputs();

        var inpName = $('#txtFName');
        var backgroundText = inpName.attr('backgroundText');

        inpName.val(backgroundText);

        inpName.focus(function(){
            if(inpName.val() == backgroundText) inpName.val('');
        }).blur(function(){
            if(inpName.val() == '') inpName.val(backgroundText);
        });

        var inpName = $('#txtLName');
        var backgroundText = inpName.attr('backgroundText');

        inpName.val(backgroundText);

        inpName.focus(function(){
            if(inpName.val() == backgroundText) inpName.val('');
        }).blur(function(){
            if(inpName.val() == '') inpName.val(backgroundText);
        });

我不再工作了，為什么？ 誰能解釋一下為什么會這樣？ 我該如何解決這個問題？

Answer 1

無恥的自我宣傳：

我創建了一個插件來做到這一點，但它使用 HTML5 占位符屬性。

http://designindevelopment.com/plugins/replaceholder-jquery-plugin/

看看它是否符合您的要求，如果沒有，我可以幫助調整您所擁有的。

Answer 2

看看一些 jQuery 水印插件。

這里這個還不錯http://code.google.com/p/jquery-watermark/

Answer 3

嘗試如下調整您的 javascript：

    var inpName = $('#<%=txtFName.ClientID %>');
    var backgroundText = inpName.attr('backgroundText');

    inpName.val(backgroundText);

    inpName.focus(function(){
        if(inpName.val() == backgroundText) inpName.val('');
    }).blur(function(){
        if(inpName.val() == '') inpName.val(backgroundText);
    });

    var inpName = $('#<%=txtLName.ClientID %>');
    var backgroundText = inpName.attr('backgroundText');

    inpName.val(backgroundText);

    inpName.focus(function(){
        if(inpName.val() == backgroundText) inpName.val('');
    }).blur(function(){
        if(inpName.val() == '') inpName.val(backgroundText);
    });

這會將要呈現給客戶端的 id 放入您的 javascript 中，因為它通常與服務器端 ID 屬性不匹配。

Answer 4

這是我自己的問題，后來我使用 ajaxWaterMarkExtender 解決了它。 在這里，我粘貼了對我非常有用的代碼（修改后的）。 這是aspx頁面中的代碼

<asp:TextBox ID="txtFName" backgroundText="First Name" runat="server" CssClass="textBoxForUI"
                            Width="80px" Style="float: left;"></asp:TextBox>
                        <cc1:TextBoxWatermarkExtender ID="txtFName_TextBoxWatermarkExtender" runat="server"
                            Enabled="True" TargetControlID="txtFName" WatermarkCssClass="waterMark" WatermarkText="First Name">
                        </cc1:TextBoxWatermarkExtender>
                        <asp:TextBox runat="server" ID="txtLName" CssClass="textBoxForUI" backgrountText="Last Name"
                            Width="110px" Style="float: left"></asp:TextBox>
                        <cc1:TextBoxWatermarkExtender ID="txtLName_TextBoxWatermarkExtender" runat="server"
                            Enabled="True" TargetControlID="txtLName" WatermarkCssClass="waterMark" WatermarkText="Last Name">
                        </cc1:TextBoxWatermarkExtender>