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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20689890/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 22:33:56  来源:igfitidea点击:

Add HTML5 placeholder text to a textbox .net

asp.net.netvb.nethtml

提问by tiffylou

I have a standard input:

我有一个标准输入:

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

I'd like to have this render with a dynamic HTML5 placeholder. Something like:

我想使用动态HTML5 placeholder 进行渲染。就像是:

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

So that it outputs the following HTML:

以便它输出以下 HTML:

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

where Site.Name = "Site #1".

其中 Site.Name = "Site #1"。

txtSearchTerm.placeholderis not a property. I have it set to text and then run javascript to show/hide on focus BUT I would much rather just use the HTML5 placeholder value. How can I render this?

txt搜索词。占位符不是属性。我将它设置为文本,然后运行 ​​javascript 来显示/隐藏焦点,但我宁愿只使用 HTML5 占位符值。我怎样才能呈现这个?

Please no JS/client side solutions.

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

回答by Steven V

You could use the Attributescollection. So you would have something like

您可以使用该Attributes集合。所以你会有类似的东西

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

or

或者

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

And if you're using resources for localization/translation:

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

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

回答by Tony

Because I find it annoying/tiresome to add all the placeholders from the code behind. You can create a new TextBox Class that inherits the WebControls TextBox and then you can add the placeholder from the CodeBehind or from the HTML Side.

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

TextBox.cs (Placed in Project/Controls/)

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);
        }
    }
}

Register Control In the Web.Config:

在 Web.Config 中注册控件:

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

(use whatever tag prefix you want)

(使用任何你想要的标签前缀)

Usage:

用法:

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

or from the code behind

或从背后的代码

SomeId.PlaceHolder="This is a PlaceHolder";

回答by RonaldPaguay

I just put placeholder property in HTML code and works:

我只是将占位符属性放在 HTML 代码中并起作用:

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

回答by mason

There is also the TextBoxWatermark extender included in Microsoft's Ajax Control toolkit. It's not HTML5, but it's backwards compatible (I believe). http://www.asp.net/AjaxLibrary/AjaxControlToolkitSampleSite/TextBoxWatermark/TextBoxWatermark.aspx

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