jquery.fieldtag.js – watermarks for inputfields

Posted May 7, 2009 * Comments(31)

Description

Nifty, isn't it?

Nifty watermarking and styling.

Did you ever see some input fields that have a description tag in it and as soon as you click into them, in order to write something, the description disappears? That’s exactly what this jQuery plugin does for you. Even picture watermarks are a piece of cake, in fact everything handled by a string of Text and/or a CSS-class assigned to an input field, is possible. For more creative ideas, just visit the demo page.

How do I use it?

This plugin works with jQuery 1.3.2+ (it should also work with earlier versions, but this is untested). Proper loading of a jQuery plugin is explained in my previous post.
As soon as the document is ready, just call $(".selector .of input").fieldtag()

To make use of the appended CSS class feature, while the field is tagged, you just have add some styles to your stylesheet: 

input{ /*this are your existing styles*/ }
input.tagged{ /*appended while tagged, for example background-image*/ }

Sometimes you want to set the text manually, this is done by calling
$("input").fieldtag({ standardText:"Your text" })

Demo and source

As jQuery itself, this plugin released under dual MIT/GPL license. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

/*
jQuery Fieldtag Plugin
    * Version 1.1
    * 2009-05-07 10:10:35
    * URL: http://ajaxcssblog.com/jquery/fieldtag-watermark-inputfields/
    * Description: jQuery Plugin to dynamically tag an inputfield, with a class and/or text
    * Author: Matthias Jäggli
    * Copyright: Copyright (c) 2009 Matthias Jäggli under dual MIT/GPL license.
	*
	* Changelog
	* 1.1
	* Support for proper clearing while submitting the form of tagged fields
	* 1.0
	* Initial release
*/
(function($){
	$.fn.fieldtag = function(options){
		var opt = $.extend({
				markedClass: "tagged",
				standardText: false
			}, options);
		$(this)
			.focus(function(){
				if(!this.changed){
					this.clear();
				}
			})
			.blur(function(){
				if(!this.changed){
					this.addTag();
				}
			})
			.keyup(function(){
				this.changed = ($(this).val()? true : false);
			})
			.each(function(){
				this.title = $(this).attr("title"); //strange IE6 Bug, sometimes
				if($(this).val() == $(this).attr("title")){
					this.changed = false;
				}
				this.clear = function(){
					if(!this.changed){
						$(this)
							.val("")
							.removeClass(opt.markedClass);						
					}
				}
				this.addTag = function(){
					$(this)
						.val(opt.standardText === false? this.title : opt.standardText )
						.addClass(opt.markedClass);
				}
				if(this.form){
					this.form.tagFieldsToClear = this.form.tagFieldsToClear || [];
					this.form.tagFieldsToClear.push(this);
 
					if(this.form.tagFieldsAreCleared){ return true; }
					this.form.tagFieldsAreCleared = true;
 
					$(this.form).submit(function(){
						$(this.tagFieldsToClear).each(function(){
							this.clear();
						});
					});	
				}
			})
			.keyup()
			.blur();
		return $(this);
	}
})(jQuery);
Bookmark and Share

31 Comments so far

  1. FJ on May 7th, 2009

    was passiert mit der Value beim Post?
    Man müsste es ja dann quasi wieder leeren bevor man den post macht.

    so quasi:
    function checkinputbeforesubmit(){
    var el = $(’input[title]‘);
    el.each(function(i) {
    if ($(this).attr(’value’) == $(this).attr(’title’))
    $(this).attr(’value’, ”);
    });
    }

  2. mat on May 7th, 2009

    @FJ: Thank you to pointing out that the fields will contain the tagged value, while submitting the corresponding form. Now the fields are cleared proper, during submitting.

  3. FJ on May 7th, 2009

    Yey. thanks. I’ll test it next week.

  4. HOTEL on June 23rd, 2009

    The demo is not working…
    Under Ie or firefox

    Antony

  5. mat on June 24th, 2009

    @HOTEL can you be more precise, please? I can’t figure out any problems..

  6. Adam on June 25th, 2009

    I really like the demo with a predefined value this will come in really handy for giving clues when users shouldn’t leave a field blank. Everything is working fine for me in both IE and Firefox and i’ve tried it on a number of versions

  7. nurettin on June 26th, 2009

    i like this script

  8. esoftway » jquery.fieldtag.js – Marcadores on June 29th, 2009

    [...] DOWNLOAD: http://ajaxcssblog.com/jquery/fieldtag-watermark-inputfields/ [...]

  9. webtechnepal on July 14th, 2009

    Love this wonderful script. Thanks..

  10. John on August 10th, 2009

    This plugin breaks down under multiple refreshes (even on the demo page). Best implementation I’ve seen, but it just doesn’t work after a refresh or two. Anyone here know how to fix this problem?

  11. mat on August 11th, 2009

    @John

    I think you tested it with firefox (or similar) and didn’t hit CTRL+F5 to refresh. Firefox does not clear formfields by a regular refresh. If so, this was a feature, not a bug, because formfields may be prefilled by the server.
    If you still can reproduce this issue with CTRL+F5, please let me know.

  12. 20 jQuery Plugins and Tutorials to Enhance Forms : Speckyboy Design Magazine on August 26th, 2009

    [...] jQuery Watermarks for Inputfields [...]

  13. 20 jQuery Plugins and Tutorials to Enhance Forms | pc-aras on September 3rd, 2009

    [...] jQuery Watermarks for Inputfields [...]

  14. 20 jQuery Plugins and Tutorials to Enhance Forms | WEBDESIGN FAN on September 18th, 2009

    [...] jQuery Watermarks for Inputfields [...]

  15. Brian on September 20th, 2009

    How do I clear the field tag values before I submit the form?

  16. mat on September 20th, 2009

    @brian
    You do not have to clear them manually. On submit, default values will be cleared automatically.

  17. Rakesh on November 2nd, 2009

    Hi mat,

    Thank you so much for this wonderful script. It works great. cheers!!

  18. Coldfusion Developer on November 9th, 2009

    Thanks for a great script – much better than others I’ve tried as they always send the watermark text as the form value when posting.

    However, I’m also using the jQuery validate plugin which highlights any missing fields. It works well with yours as the title values ARE cleared before the submit.. Yet, if the form fails validation all I end up with is the blank boxes and no watermarked text in the invalid fields.

    Is there a call I can make to re-test and re-populate the text boxes with the watermarked values?

    Hope that makes sense…

    Martin

  19. arken on January 4th, 2010

    It shows different output in IE6 & IE7 on combination of text and image demo.

  20. Andy on January 11th, 2010

    Using this plug-in with the jQuery datepicker and I ended up adding a hook for the Change event to get everything to work properly.

    Thanks for the good work!

  21. onur on January 13th, 2010

    i like this script

  22. ngi644の日記 » Blog Archive » Ploneのテキストフィールドのデフォルト文字 on January 27th, 2010

    [...] Ploneのテキストフィールドのデフォルト文字 1月 27, 2010 3:59 pm ngi644 Zope/Plone テキストフィールド欄にデフォルト文字を表示させたいとき、一般的には、jquery.fieldtab.jsを使う。 [...]

  23. sarah on February 3rd, 2010

    this is the first watermark code i found that actually WORKED!!!
    thanks so much for sharing, what a champ!

  24. matt kauffman on February 19th, 2010

    If anyone runs into an issue where in some browsers hitting refresh or the back button causes the plugin not to work (because the browser is pre-populating the fields with the watermarked value) you can fix it by changing the keyup event to this:

    .keyup(function(){
    this.changed = ($(this).val() && $(this).val() !== $(this).attr(’title’) ? true : false);
    })

    Otherwise works like a charm!

  25. we on April 20th, 2010

    doesn’t work in Password fields, i’m getting asterisks!!

  26. Ants on April 30th, 2010

    You can use the following code to clear and submit the form via javascript:

    Change to jquery.fieldtag.js:
    if (this.form) {
    this.form.tagFieldsToClear = this.form.tagFieldsToClear || [];
    this.form.tagFieldsToClear.push(this);

    if (this.form.tagFieldsAreCleared) { return true; }
    this.form.tagFieldsAreCleared = true;

    $(this.form).submit(function () {
    $(this.tagFieldsToClear).each(function () {
    this.clear();
    });
    });
    /* BEGIN-CHANGE: Added Method to form for submitting form but clearing first*/
    this.form.clearAndSubmit = function () {
    $(this.tagFieldsToClear).each(function () {
    this.clear();
    });
    this.submit();
    };
    /* END-CHANGE */
    }

    An example of a drop down list posting a form using the clearAndSubmit method:

    None
    One
    Two
    Three

  27. Ants on April 30th, 2010

    Some strange encoding removed my drop down list code:

    here is what the onchange event looks like:

    onchange=”this.form.clearAndSubmit();”>

  28. Tim on June 15th, 2010

    How can I get this to work with password input fields? I’m not a jquery expert… any help would be much appreciated!

  29. 55 jQuery Form Plugins To Download And Use | Design your way on June 30th, 2010

    [...] watermarks for inputfields [...]

  30. 55 jQuery Form Plugins To Download And Use « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates on July 2nd, 2010

    [...] watermarks for inputfields [...]

  31. 55 jQuery Form Plugins To Download And Use : Free Pictures on July 29th, 2010

    [...] watermarks for inputfields [...]

Leave a Reply