Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.


Mirrored from (no longer working)

Watermark is a PrototypeJS based class that emulates the HTML5 placeholder attribute for Internet Explorer.

It uses and overlying div to present the placeholder text instead of changing the textual content of an input box. Since any changes of text can cause some problems when posting a form I found this to be an ideal solution. The component works in all browsers that PrototypeJS supports.

A relative and absolute div is wrapped around a text input or area to make sure that watermark is positioned right above it. Styles from the underlying input box are copied into the watermark div element. We can also apply watermark to every element that has a class named "watermark"


Include the watermark.js after prototype.js and link or import the CSS file.

<script src="prototype.js" type="text/javascript"></script>
<script src="watermark.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="watermark.css" />
<!--   OR    -->
<style type="text/css">
@import url('watermark.css');


By default any <input /> or <textarea /> tags with the watermark class will get the watermark attached to them. Update the title tag to change the text of the watermark.

<input type="text" class="watermark" title="My default data" />

Real running example is here

Something went wrong with that request. Please try again.