可以在文本框的placeholder=""插入搜索图标吗?

Posted 2023-03-26

可以在文本框的placeholder=""插入搜索图标吗? 效果：

参考技术A placeholder是html5新增的input的一个熟悉，主要是让表单体验更加智能，相当于value属性，但是他有一个好处就是当我们聚焦输入文本的时候我们在placeholder="默认值"的文本就会自动清空，，
不过兼容性还不太好，至少ie好像要9以上才能支持，，所以很多pc端的聚焦处理还是用js来的

for属性应该是label的属性吧？？这个是和input的id绑定，当我们点击input前面的文本标识会自动聚焦到文本框，例如：
<form>
<label for="name">用户名</label>
<input type="text" name="name" accesskey="c" id="name" />
</form>
这个例子，当我点击用户名的时候，会自动聚焦到文本框里头，也就是光标会自动定位到文本框里本回答被提问者采纳

文本框的占位符警告

【中文标题】文本框的占位符警告

【英文标题】：Placeholder warning for textbox

【发布时间】：2015-12-15 06:09:53

【问题描述】：

在文本框中添加占位符在 Visual Studio 中显示为警告

<asp:TextBox ID="name" CssClass="form-control" runat="server" placeholder="e.g. John Doe" ></asp:TextBox>

错误信息

Attribute 'placeholder' is not a valid attribute of element 'TextBox'.  

在文本框中放置占位符从而修复警告的推荐方法是什么

【问题讨论】：

您当前版本的 Visual Studio 不了解 HTML5 验证，这就是您收到警告的原因。

在这篇文章中，您将找到一个可行的解决方案来解决它。 ***.com/questions/7896218/…

【参考方案1】：

占位符是一个 HTML5 属性。这就是你收到警告的原因。 placeholder 属性仅适用于现代浏览器，如 Chrome、IE11 和最新版本的 Firefox。但在较旧的浏览器中，它将无法正常工作。要使占位符在其他浏览器中工作，您需要使用 AJAX 工具包 TextBoxWatermarkExtender。示例：

 <asp:TextBox ID="name" CssClass="form-control" runat="server" placeholder="e.g. John Doe" ></asp:TextBox>

你也可以这样写：

<asp:TextBox ID="name" CssClass="form-control" runat="server" value="Name" onblur="if(value=='') value = 'e.g. John Doe'" onfocus="if(value=='e.g. John Doe') value = ''"></asp:TextBox>

【参考方案2】：

不要担心那个警告信息。您的占位符将完全按照它应该的方式工作。这是因为 ASP .Net 版本 支持 HTML。由于 .NET framework 4.5 引入了许多支持 HTML5 的新功能，并且对于所有这些不受支持的属性，它会显示相同的不受支持的警告。

【讨论】：

如果发现 Visual Studio 的消息令人讨厌，则可以在代码后面添加占位符，例如 name.Attributes.Add("placeholder", "e.g. John Doe")。把它放在代码后面也有点烦人，但至少消息停止了。有关更多详细信息，请参阅***.com/a/15824040/2615878。