Posted By

magicweb on 02/09/11


Tagged

text expandable minimised


Versions (?)

Moowatermark


 / Published in: JavaScript
 

URL: http://www.magicwebsolutions.co.uk/demos/home.action?demo=watermark

Help your users by providing a disappearing text right in the text field. Dependencies: mootools core/1.3

  1. JavaScript:
  2.  
  3. var MooWatermark = new Class({
  4.  
  5. initialize: function(options) {
  6. this.textField = options.textField;
  7. this.hint = (options.hint ? options.hint : '');
  8. this.watermarkClass = (options.watermarkClass ? options.watermarkClass : 'moowatermark');
  9.  
  10. window.addEvent('load', function() {
  11. if ($(this.textField)){
  12. $(this.textField).addEvent('focus', this.clearTextFieldValue.bind(this));
  13. $(this.textField).addEvent('blur', this.setInitialValue.bind(this));
  14. this.setInitialValue();
  15. if(Browser.name == 'ie') {
  16. var form = document.getElementById(this.textField).form;
  17. if(form) {
  18. form.attachEvent("onsubmit", this.clearTextFieldValue.bind(this));
  19. }
  20. } else {
  21. if($(this.textField).getParent('form')){
  22. $($(this.textField).form).addEvent('submit', this.clearTextFieldValue.bind(this));
  23. }
  24. }
  25. }
  26. }.bind(this));
  27. },
  28.  
  29. setInitialValue: function(){
  30. if ($(this.textField).value == ''){
  31. $(this.textField).value = this.hint;
  32. $(this.textField).addClass(this.watermarkClass);
  33. }
  34. },
  35.  
  36. clearTextFieldValue: function(){
  37. if ($(this.textField).value == this.hint) {
  38. $(this.textField).value = '';
  39. $(this.textField).removeClass(this.watermarkClass);
  40. }
  41. }
  42.  
  43. });
  44.  
  45.  
  46. new MooWatermark({
  47. textField: 'watermarkname',
  48. hint: 'Your name please'
  49. });
  50.  
  51.  
  52.  
  53. CSS:
  54.  
  55. .moowatermark {
  56. color: gray;
  57. font-style: italic;
  58. }

Report this snippet  

You need to login to post a comment.