Advanced Search

jQuery Default-text plugin

/ Published in: JavaScript
Save to your folder(s)
This is a simple effect for displaying a predefined text in a text box in web page. Download jQuery and the plugin and follows the sample code in [http://cloudgen.w0ng.hk/jquery/defaultText.php](http://cloudgen.w0ng.hk/jquery/defaultText.php "Default Text")

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <script type="text/javascript">
  2. (function($){
  3. 	var className="DefaultText";
  4. 	function DefaultText(target){
  5. 		if(target) {
  6. 			this.init(target);
  7. 			if(!this.target.data("init")) 
  8. 				this.target.data("init",[]);
  9. 			this.target.data("init").push(function(e){
  10. 				new DefaultText(e);
  11. 			});
  12. 		}
  13. 	}
  14. 	DefaultText.prototype.init=function(target){
  15. 		this.className=className;
  16. 		this.target=$(target).data(className,this);
  17. 		this.defaultText=""+this.target.attr("rel");
  18. 		if(this.isDefault()) 
  19. 			this.setDefault();
  20. 		else 
  21. 			this.setNormal();
  22. 		this.seed=Math.round(Math.random()*10000);
  23. 		this.target.addClass(className+this.seed)
  24. 		.closest("form").submit(function(){
  25. 			$("input:text",this).each(function(){
  26. 				if(typeof $(this).data(className)!="undefined" 
  27. 				&& $(this).data(className).isDefault()) 
  28. 					$(this).data(className)
  29. 					.clear();
  30. 			})
  31. 		})
  32. 	}
  33. 	DefaultText.prototype.setDefault=function(){
  34. 		this.target
  35. 		.css({color:"#AAA"})
  36. 		.val(this.defaultText);
  37. 	};
  38. 	DefaultText.prototype.setNormal=function(){
  39. 		this.target
  40. 		.css({color:"#000"});
  41. 	};
  42. 	DefaultText.prototype.clear=function(){
  43. 		if(this.target.attr("value")==this.target.attr("rel"))
  44. 			this.target
  45. 			.css({color:"#000"})
  46. 			.attr("value","")
  47. 	};
  48. 	DefaultText.prototype.isDefault=function(){
  49. 		return (this.target.attr("value")==this.target.attr("rel") 
  50. 			|| this.target.attr("value")=="")
  51. 	};
  52. 	DefaultText.prototype.live=function(){
  53. 		if (!this.goLive){
  54. 			$("."+className+this.seed)
  55. 			.live("click",function(){
  56. 				if(!$(this).data(className)) new DefaultText(this);
  57. 				$(this)
  58. 				.unbind("blur")
  59. 				.blur(function(){
  60. 					if($(this).data(className).isDefault()) 
  61. 						$(this).data(className)
  62. 						.setDefault();
  63. 					else 
  64. 						$(this).data(className)
  65. 						.setNormal();
  66. 				})
  67. 				.data(className)
  68. 				.clear();
  69. 			}).live("keydown",function(){
  70. 				if(!$(this).data(className)) new DefaultText(this);
  71. 				$(this)
  72. 				.unbind("blur")
  73. 				.blur(function(){
  74. 					if($(this).data(className).isDefault()) 
  75. 						$(this).data(className)
  76. 						.setDefault();
  77. 					else 
  78. 						$(this).data(className)
  79. 						.setNormal();
  80. 				})
  81. 				.data(className)
  82. 				.clear();
  83. 			});
  84. 			this.goLive=true;
  85. 		}
  86. 		return this
  87. 	};
  88. 	$.fn.addDefaultText=function(){
  89. 		this.each(function(){
  90. 			new DefaultText(this).live();
  91. 		});
  92. 		return this
  93. 	};
  94. })(jQuery);
  95. </script>

URL: http://cloudgen.w0ng.hk/jquery/defaultText.php

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.