Improving #SharePoint Forms – Watermarks

Posted: May 3rd, 2010 | Author: davecavins | Filed under: General SharePoint | Tags: better forms, forms, jQuery, SharePoint | 2 Comments »

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.

• Improving #SharePoint Forms – Hints
• Improving #SharePoint Forms – Character Count

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.

<script type="text/javascript" src="../../jquery.tinywatermark-2.0.0.js"></script>

We also need some css to style the watermarks

  <style type="text/css">
  .watermark {color:#999}
</style>

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.

$("input[title='Author']").addClass('watermarked');
$("input[title='Title']").addClass('watermarked');
$("textarea[title='Body']").addClass('watermarked');

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

$('.watermarked').each(function() {
  $(this).watermark('watermark', $(this).attr('title'));
});

Thats all. Enjoy.

Related posts:

1. Improving #SharePoint Forms
2. Improving #SharePoint Forms – Character Count
3. Resizable textareas in SharePoint edit forms

---