Improving #SharePoint Forms – Watermarks

So I found this cool jQuery plugin that does watermarks for form inputs. Using watermarks is a good way to help make SharePoint forms easier to use. To test the plugin I started with the new item form from same test list I used in my previous posts.

Watermarks

Prerequisites

  • jQuery Library referenced in the page
  • CEWP on the page

Setup

First make sure you reference a copy of the plugin script. I added the link to the section of the page using the method explained in this post.

[sourcecode language=”html”]<script type="text/javascript" src="../../jquery.tinywatermark-2.0.0.js"></script>[/sourcecode]

We also need some css to style the watermarks

[sourcecode language=”css”] <style type="text/css">
.watermark {color:#999}
</style>
[/sourcecode]

The plugin works by finding all the inputs with a class of “watermarked” and using this title attribute as the watermark. So I used jQuery to select the inputs I wanted to watermark and add the “watermarked” class to them.

Here is the code I used.

[sourcecode language=”javascript”] $("input[title=’Author’]").addClass(‘watermarked’);
$("input[title=’Title’]").addClass(‘watermarked’);
$("textarea[title=’Body’]").addClass(‘watermarked’);
[/sourcecode]

After the inputs have the right class all we need to do is call the plugin script like so

[sourcecode language=”javascript”] $(‘.watermarked’).each(function() {
$(this).watermark(‘watermark’, $(this).attr(‘title’));
});
[/sourcecode]

Thats all. Enjoy.

3 Responses

Add a Comment

Your email address will not be published. Required fields are marked *