Archive for May, 2009

jquery.fieldtag.js – watermarks for inputfields 24

Posted May 7, 2009

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);