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


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.