Question

我有一个标准输入：

<asp:TextBox type="text" runat="server" id="txtSearchTerm" />

我希望使用动态 HTML5占位符进行渲染。类似的东西：

'Code Behind
txtSearchTerm.**placeholder** = "Search " + Site.Name

因此它输出以下HTML：

<input type="text" runat="server" id="txtSearchTerm" 
placeholder="Search Site #1" />

其中Site.Name =“Site＃1”。

txtSearchTerm。占位符不是属性。我把它设置为文本然后运行javascript来显示/隐藏焦点但我宁愿只使用HTML5占位符值。我该如何渲染呢？

请不要JS /客户端解决方案。

Answer 1

您可以使用Attributes集合。所以你会有像

这样的东西

txtSearchTerm.Attributes.Add("placeholder", "Search" + Site.Name);

或

txtSearchTerm.Attributes["placeholder"] = "Search" + Site.Name; // or Attributes("placeholder") if you're using vb.net

如果您使用资源进行本地化/翻译：

txtSearchTerm.Attributes["placeholder"] = GetLocalResourceObject("YourLocalResourceName").ToString();

Answer 2

因为我发现从后面的代码添加所有占位符很烦人/烦人。您可以创建一个继承WebControls TextBox的新TextBox类，然后可以从CodeBehind或HTML Side添加占位符。

TextBox.cs（置于Project / Controls /中）

namespace Project.Controls
{
    public class TextBox : System.Web.UI.WebControls.TextBox
    {
        public string PlaceHolder { get; set; }

        protected override void OnLoad(EventArgs e)
        {
            if(!string.IsNullOrWhiteSpace(PlaceHolder))
                this.Attributes.Add("placeholder", PlaceHolder);

            base.OnLoad(e);
        }
    }
}

在Web.Config中注册控制：

  <system.web>
    <pages>
      <controls>
        <add tagPrefix="ext" assembly="Project" namespace="Project.Controls" />
      </controls>
    </pages>
  </system.web>

（使用你想要的任何标签前缀）

<强>用法：

<ext:TextBox runat="server" id="SomeId" PlaceHolder="This is a PlaceHolder" />

或来自背后的代码

SomeId.PlaceHolder="This is a PlaceHolder";

Answer 3

我只是将占位符属性放在HTML代码中并运行：

<asp:TextBox placeholder="hola mundo" ID="some_id" runat="server"/>

Answer 4

Microsoft的Ajax Control工具包中还包含TextBoxWatermark扩展程序。它不是HTML5，但它向后兼容（我相信）。 http://www.asp.net/AjaxLibrary/AjaxControlToolkitSampleSite/TextBoxWatermark/TextBoxWatermark.aspx

<ajaxToolkit:TextBoxWatermarkExtender ID="TBWE2" runat="server"
    TargetControlID="TextBox1"
    WatermarkText="Type First Name Here"
    WatermarkCssClass="watermarked" />

将HTML5占位符文本添加到文本框.net

4 个答案: