在 Web 应用程序的文本框中应用水印

• 下载源代码文件（包含演示项目）- 7.33 KB

引言

您可能在一些网站上看到文本框中显示水印。 只要您点击文本框，水印就会消失，您可以开始输入文本。 在本文中，我将解释一种小的 JavaScript 技巧，您可以使用它在您的 Web 应用程序中实现相同的功能。 我包含了一个库，您可以使用它来实现相同的功能，而无需担心编写 JavaScript 代码。

背景

其思想是利用 HTML input 标签的 OnFocus 和 OnBlur 事件。 该库在 input 标签之间切换两种样式，并且它还会检查默认文本是否已更改。

使用代码

要使用此代码，您需要为文本框提供至少两种样式。 一种表示带有水印的文本框，另一种表示普通的文本框。 示例项目包含这样的样式表。

要将水印应用于 id=textbox1 的文本框，请在您的 page_load 事件处理程序中编写以下代码

TextBoxWatermark.WaterMarkHelper.ApplyWaterMarkToTextBox(textBox1, _
   "Watermarktext", "WaterMarkedTextBoxStyle", "NormalTextBoxStyle")

增强功能

您可以增强该库以拦截提交事件，并在必需字段验证程序触发之前删除默认文本。

更新历史

• 2006 年 8 月 30 日：修复了单引号错误。 当在 WatermarkText 中提供单引号时，该库会失效。
• 2006 年 8 月 23 日：修复了库，使其与 Firefox 兼容。