Skip to content
This repository has been archived by the owner on Jul 17, 2020. It is now read-only.

Instructions

Jump to bottom
marioestrada edited this page May 17, 2011 · 9 revisions

#Requirements and Instructions

#Requirements

  1. Import jQuery from google or your local copy (Using google's copy):

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

  2. Below the previous code import the jQuery Watermark plugin from your local copy:

     <script type="text/javascript" src="../js/jquery.watermark.js"></script>

  3. Both lines could either be before the </body> closing tag or inside the <head> tag, it is recommended to import all javascript just after the closing <body> tag, because script downloads might delay the page display.

#Instructions

##Quick

  1. Add the 'jq_watermark' class to the input elements (works on text inputs and textareas).
  2. Add a title attribute to the elements, the content of the title attribute will be shown as the watermark text.
  3. Done :)

##Options (Advanced)

  • Start the watermark plugin by using the '.watermark()' command on an input field. Eg.:
$('input#email').watermark();
  • The plugin accepts 2 arguments: 'text' & 'css_options'.
    • 'text' can define the text to be displayed, if no text is defined it will default to the 'title' attribute or the 'placeholder' attribute (HTML5) of the input element.
    • 'options' accepts the following options: 'color', 'top', 'left' & 'fallback*'.

      • 'color' specifies the color to use for the watermark label (defaults: '#999').

      • 'top' is a vertical offset which you can manipulate, as is 'left' for horizontal offset. The offsets can be negative.

      • 'fallback' option (defaults: false) detects if native HTML5 placeholder support is present and if it is the plugin won't load and will let the browser handle it.

           $('input#email').watermark('Email', {color: '#333', left: -2, top: 10, fallback: true});

* New in 1.1.1

  • You can also define defaults to be used on all watermarked elements by using the 'setDefaults' function. Eg:
$.watermarker.setDefaults({ color: '#f00', left: 8 });
$('input[type=text]').watermark();

##Known Issues

  • Chrome (and other browsers) autofill may not trigger the change event on autofilled fields making the watermark labels appear on top of the text. You can use this as a fix, but it is not a very good one:
$('form input').change(function(e, was_triggered)
{
  var form = $(this).closest('form');
  
  if(!was_triggered)
  {
    setTimeout(function(){ $('input', form).trigger('change', [true]); }, 1);
  }
});
  • FF: When a field has focus the text might appear green, this is a bug with FF rendering a work around is applying a background color to the .watermark element.
Clone this wiki locally