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');替换为var inpName = $('#txtLName'); 但是，如果我这样做，我的第一个工作文本框（txtFirst）可以正常工作。但是，如果我这样写： $（文件）。就绪（函数（）{ 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 Watermark插件。

这里的这个不错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>

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

4 个答案: