Question

如何在页面加载期间为asp文本框设置默认文本，并在关注时清除它们。

我知道使用javascript和jquery在html文本框中执行此操作。但是如何在asp.net中执行此操作..任何帮助请...

我写了

<asp:TextBox ID="Rloginemail" runat="server" Width="100%" Height="25px" 
     BackColor="#ECE8D0" BorderStyle="None" ForeColor="#482B1B" 
     Text="E-MAIL" >E-MAIL</asp:TextBox>

在上面的代码中，您可以看到text=email ..如果我使用此默认文本，但未在焦点上清除..

Answer 1

HTML 5

您可以使用placeholder html5属性

<input type="text" placeholder="search" />

jQuery占位符插件

如果您的浏览器不支持，请使用此jquery placeholder

$('input, textarea').placeholder()

Answer 2

您已经提到过可以使用javascript或jQuery为html文本框执行此操作，但不知道如何使用Asp.Net文本框执行此操作。对？是不是因为你的asp.net文本框的id动态变化而且你无法访问它？如果是，那么您可以使用以下代码访问id：

document.getElementById("<%=textbox.ClientID%>")

您可以在aspx代码编写的脚本中使用上面的代码来获取asp.net文本框，然后您可以使用javascript / jQuery，因为您知道如何操作。

Answer 3

使用OnFocus事件并将Text属性设置为空字符串

示例：

<asp:TextBox ID="Rloginemail" runat="server" Width="100%" Height="25px" BackColor="#ECE8D0" BorderStyle="None" ForeColor="#482B1B" Text="E-MAIL" onfocus="if (this.value == 'E-MAIL')  this.value = ''; ">E-MAIL</asp:TextBox>

或者，正如this回答中提到的那样 - 你也可以使用名为placeholder的asp.net文本框属性：

        <asp:TextBox ID="Rloginemail" runat="server" Width="100%" Height="25px" 
                     BackColor="#ECE8D0" BorderStyle="None" ForeColor="#482B1B" 
                     placeholder="E-MAIL" ></asp:TextBox>

Answer 4

在asp.net中，您可以使用ajax控件工具包来完成。我们有一个TextboxExtender可以做到以下其他事情

<ajaxToolkit:TextBoxWatermarkExtender ID="TBE" runat="server"
TargetControlID="youTextBoxID"
WatermarkText="YOUR DEFAULT TEXT"
WatermarkCssClass="yourPreferred css" />

Answer 5

我们使用Ajax Control Toolkit的Textbox Watermark扩展器： http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/TextBoxWatermark/TextBoxWatermark.aspx

Answer 6

  $(document).ready(function () {
    $(":input[data-watermark]").each(function () {
        $(this).val($(this).attr("data-watermark"));
        $(this).css("color", "#a8a8a8");
        $(this).bind("focus", function () {
            if ($(this).val() == $(this).attr("data-watermark")) $(this).val('');
            $(this).css("color", "#000000");
        });
        $(this).bind("blur", function () {
            if ($(this).val() == '') {
                $(this).val($(this).attr("data-watermark"));
                $(this).css("color", "#a8a8a8");

            }
            else {
                $(this).css("color", "#000000");
            }
        });
    });
});

式

<style>
.placeholder {
color: #a8a8a8;

}

::-webkit-input-placeholder {
color: #a8a8a8;

}

:-moz-placeholder {
color: #a8a8a8;

}

.home_textbox{width:155px; height:25px; border:1px solid #c9c5c1; border-radius:5px; position:relative; font-size:13px; color:#b5b0aa; font-family:"Myriad Pro"; padding:0 5px;}

文本框

<input type="text" name="TxtLogin" id="TxtLogin"
                            class="home_textbox" runat="server" tabindex="1" style="color:Black;" data-watermark="Username" />

如何显示asp.net文本框的默认文本

6 个答案: