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

Posted 2023-03-05

【中文标题】将 HTML5 占位符文本添加到文本框 .net

【英文标题】：Add HTML5 placeholder text to a textbox .net

【发布时间】：2014-01-08 12:07:27

【问题描述】：

我有一个标准输入：

<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.placeholder 不是属性。我将其设置为文本，然后运行 ​​javascript 以显示/隐藏焦点但我宁愿只使用 HTML5 占位符值。我该如何渲染这个？

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

【问题讨论】：

另见***.com/questions/15823983/…

【参考方案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();

【参考方案2】：

Microsoft 的 Ajax 控件工具包中还包含 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" />

【讨论】：

注意这里。 OP 在这里要求没有 Javascript 解决方案，并且 ajax 工具包严重依赖于 Javascript。看着它，你是对的，它通过 Javascript 向后兼容，但如果浏览器支持它，它也不会实现 HTML5 占位符。

【参考方案3】：

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

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";

【讨论】：

从ASPX文件中，PlaceHolder的赋值可以是动态的吗？动态占位符是问题的目标。

当然可以动态分配。它可以像任何其他控件属性一样使用。您有特定的用例吗？也许我可以帮你解决这个问题。

【参考方案4】：

我只是将占位符属性放在 HTML 代码中即可：

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

【讨论】：

这可行，但 Visual Studio（对我来说是 2015 年）可能会在其 错误列表.