如何在ASP.Net MVC中的文本框中显示水印而不是值？

Question

在我看来，我有

<%= Html.TextBoxFor(m => m.Patient.Weight, new { title = "Weight" , style = "width: 3em", @class = "fieldRequired watermark" }) %> pounds</div>

当我运行应用程序时，我在文本框中显示。当我从文本框中删除值时，它将显示水印。那么，我如何制作？

Answer 1

您正在寻找的术语是占位符。

HTML 5中有一个选项可用于指定占位符。

<input name="name" type="text" placeholder="Your name...">
@Html.TextBoxFor(m => m.Name, new { placeholder="Your Name..." })

但是，并非所有浏览器都支持它。所以你要去JavaScript了。

Here's a popular option on NuGet - jQuery.placeholder.它将阅读HTML 5属性并处理不支持它的浏览器的后备。

只需在文档onload中添加脚本即可。还有一些css类，check their docs for further info.

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

修改： placeholder is supported in all major modern browsers

Answer 2

（我希望将此作为评论包含在内，但系统不会让我在没有50分的情况下做到这一点......所以我将它放在这里作为＆＃34;答案＆＃34;，即使我我只专注于术语。）

实际上，OP使用术语＆＃34;水印＆＃34;与Microsoft对该术语的使用保持一致，因为它涉及由生成HTML输入标记的MVC Html助手对象呈现的文本框。然而，HTML5确实为text，search，url，tel，email和password类型的输入标签引入了占位符属性。这里的断开是HTML5标准引用＆＃34;提示文本＆＃34;你在HTML输入框中看到＆＃34;占位符＆＃34;微软将其称为＆＃34;水印＆＃34;。

但微软可能会特别使用这个术语，因为它有时会将输入标记的水印称为在用户输入数据之前已在该输入对象的样式中指定的图像。因此，虽然Microsoft使用该术语来描述显示为提示的文本或图像，但HTML5占位符属性只能指定文本。