Requirements
- 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>
- Below the previous code import the jQuery Watermark plugin from your local copy:
<script type="text/javascript" src="../js/jquery.watermark.js"></script>
- 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
Fast
- Add the 'jq_watermark' class to the input elements (works on text inputs and textareas).
- Add a title attribute to the elements, the content of the title attribute will be shown as the watermark text.
- 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.
This watermark plugin beats all the other ones.
Thank you so much! Dunn.
doesn't work for me, i'd appreciate a more detailed example writing 'input#email' is not clear weather 'email' is the name or id of the input or if 'input#email' is the name. giving instructions should be with a thorough example.
thanks.
Looks great, but for whatever reason when I go to post the form, all the watermarked fields don't appear as form elements any more. I'm not sure why, but I don't have time to debug the plugin. Need to punt on it. Sigh.
this works beautifully. however, I'm having an issue with Google Chrome (could be with other browsers, haven't checked yet):
- when the browser autofills the form which uses .watermark plugin, the watermarks stay in place, yet under them, the auto-filled text appears as well, creating an unreadable mashup
Hi Mario, how are you? and thank you very much for this lovely plugin. I have now 2 small problems and hope you can help me solve them.
1- how can I have the text inside the input box bold? i tried the property font-weight in the css file but didn't work :(
2- watermark is not positioned well in this page: http://moroccan-arts.co.uk/test-index-watermark.php in the search engine and also when you hover "Account".
Thanks a lot for your help
Hey, I've been researching watermark/label plugins, and this one beats all others, in that the interaction is very polished and most side effects are taken into account (autocomplete, passwords).
Would be 100% good if you could use standard LABEL elements instead of title attributes, in a truer progressive enhancement style.
As mentioned above. The watermark doesn't hide itself if the server sets the value of a textbox.
Other than that its pretty easy to use and no other problems.
Is anyone having an issue with this plug-in and IE7/8? Once focus is lost on the text-boxes, the watermark no longer appears.
It appears defaults does not work with fallback: $.watermarker.setDefaults({fallback: true});
which is a shame since now I have to duplicate all watermarks... the jQuery object method does work with fallback:true but then REQUIREs watermark text.
I also had to add these css rules to get this to work with input elements that are formatted even a tiny bit:
.watermark_container {
} .watermark { }I like it. But I need to handle the input field's click event. It looks like whatever shows the watermark blocks the event from the input field. Is there a way around this?
Any bugs please report in the issues tab: http://code.google.com/p/jq-watermark/issues/list