By zubl on

Hello!

I want that, if you click into the textarea or the inputfield of a webform, the default value in this field disappears but by clicking on the outside of the webform (e.g. the content field or any image) the default value appears again. Thats my kind of problem right now.
In the following you see the solution of the module "custom search box":

onblur="if (this.value == '') {this.value = 'DEFAULT';}" onfocus="if (this.value == 'DEFAULT') {this.value = '';}"

Somebody an idea?

Thanks in advance!

zubl

⋅ Categories: Drupal 6.x

Comments

captaindav’s picture

captaindav commented

I alsto need this feature. I suppose we need to figure out how to manipulate the formsapi array for the webform in question?

captaindav
http://icfolson.com

captaindav’s picture

captaindav commented

The following JQuery code seems to work great:

      $(".webform-client-form input:text, .webform-client-form textarea").each(function(i){
                $(this).data("default", this.value).bind("focus", function(e){
                     if ($.trim(this.value)==$(this).data("default")) this.value = "";
                }).bind("blur", function(e){
                     if ($.trim(this.value).length==0) this.value = $(this).data("default");
                });
       });

Note the above code will effect any Webform that has a field with a default value. I believe you could target a specific Webform by specifying its id in the first line.

I put the code in a .js file which I called from template.php: 

       drupal_add_js(path_to_theme()."/script.js", "theme");

I hope to make a patch to webform as there is an obvious need for this feature.

captaindav
http://icfolson.com

eforth’s picture

eforth commented

The previous suggestion didn't work for me.

I found this different solution -> http://webdeveloper.beforeseven.com/jquery/default-text-field-value-disa...

After modifying small things, now this works for all forms and text areas across all drupal forms (including admin):

/**
 * Written by Rob Schmitt, The Web Developer's Blog
 * http://webdeveloper.beforeseven.com/
 */

/**
 * The following variables may be adjusted
 */
var active_color = '#000'; // Colour of user provided text
var inactive_color = '#999'; // Colour of default text

/**
 * No need to modify anything below this line
 */

$(document).ready(function() {
  $("input.form-text").css("color", inactive_color);
  var default_values = new Array();
  $("input.form-text").focus(function() {
    if (!default_values[this.id]) {
      default_values[this.id] = this.value;
    }
    if (this.value == default_values[this.id]) {
      this.value = '';
      this.style.color = active_color;
    }
    $(this).blur(function() {
      if (this.value == '') {
        this.style.color = inactive_color;
        this.value = default_values[this.id];
      }
    });
  });
});

Also included this second code, making it work for text areas as well.

$(document).ready(function() {
  $("textarea.form-textarea").css("color", inactive_color);
  var default_values = new Array();
  $("textarea.form-textarea").focus(function() {
    if (!default_values[this.id]) {
      default_values[this.id] = this.value;
    }
    if (this.value == default_values[this.id]) {
      this.value = '';
      this.style.color = active_color;
    }
    $(this).blur(function() {
      if (this.value == '') {
        this.style.color = inactive_color;
        this.value = default_values[this.id];
      }
    });
  });
});

I implemented this the very same way the solution above was implemented.

sunchaser’s picture

sunchaser commented

so just put the above code into a js file
let's name it deftextvalue.js and put it in sites/all/themes/[themename]/js

then put a reference into your .info file like so

;scripts
scripts[] = js/deftextvalue.js

Flush cache and woppah! should work.

(if the above way of including the js could be optimized, let me know)

guysaban’s picture

guysaban commented

If you include the first and second code snippets in the same file then the second code snippet (form-textarea) will not work (at least in my case it did not). I changed the "default_values" in the second code snippet to be "default_area_values". This avoids a conflict with the "default_values" in the first code snippet (form-text).

Fixed as follows:

$(document).ready(function() {
  $("textarea.form-textarea").css("color", inactive_color);
  var default_values = new Array();
  $("textarea.form-textarea").focus(function() {
    if (!default_values[this.id]) {
      default_values[this.id] = this.value;
    }
    if (this.value == default_values[this.id]) {
      this.value = '';
      this.style.color = active_color;
    }
    $(this).blur(function() {
      if (this.value == '') {
        this.style.color = inactive_color;
        this.value = default_values[this.id];
      }
    });
  });
});
syntheticMedia’s picture

syntheticMedia commented

what a life saver, thanks to all who contributed to this post, extremely helpful, thank you!!!

raphael.godoi’s picture

raphael.godoi commented

I implemented this to be css available, and work for inputs and textareas.

I know that its too late to do this changes but here is my code:

(function($) {
    
	$(document).ready(function() {
        
		$('input.form-text, textarea.form-textarea').addClass('form-inactive');

        var default_values = new Array();
        $("input.form-text, textarea.form-textarea").focus(function() {
            if (!default_values[this.id]) {
                default_values[this.id] = this.value;
            }
            if (this.value == default_values[this.id]) {
                this.value = '';
				$(this).toggleClass('form-inactive');
            }
            $(this).blur(function() {
                if (this.value == '') {
                    this.value = default_values[this.id];
					$(this).toggleClass('form-inactive');
                }
            });
        });
    
	});

    //End of gif related example. Put your code between these comments;
})(jQuery);
syntheticMedia’s picture

syntheticMedia commented

Is there any way to insert some conditional code to disallow certain forms? IE I want this behavior on all but 2 of my forms, how could i disallow these two, but have this behavior by default on all other forms??

Please advise, thanks!

jweberg’s picture

jweberg commented

If you are trying to do this on the search box, the custom search box module will do it for you.

sarhansg’s picture

sarhansg commented

How do I set this for only some forms and not all? The problem I am facing is that the script applies to all text fields even those on node/add pages. Anybody else facing this issue?

syntheticMedia’s picture

syntheticMedia commented

I too need this...essentially if we could disallow all node edit forms that would be great

sarhansg’s picture

sarhansg commented

Yes, that would suffice. What I experience now is node edit pages get affected by this which makes editing pages very difficult.

sarhansg’s picture

sarhansg commented

I've been using Compact Forms (http://drupal.org/project/compact_forms) module to achieve this.

jorisx’s picture

jorisx commented

Nice little module that compact forms :)

Http://www.reloadmedia.com

RoyE’s picture

RoyE commented

i'm using this code on drupal 7, based on the above. i put it in a /js subfolder under mytheme folder

 var active_color = '#000'; // Colour of user provided text
var inactive_color = '#999'; // Colour of default text
jQuery(document).ready(function() {
  jQuery("input.form-text").css("color", inactive_color);
  var default_values = new Array();
  jQuery("input.form-text").focus(function() {
    if (!default_values[this.id]) {
      default_values[this.id] = this.value;
    }
    if (this.value == default_values[this.id]) {
      this.value = '';
      this.style.color = active_color;
    }
    jQuery(this).blur(function() {
      if (this.value == '') {
        this.style.color = inactive_color;
        this.value = default_values[this.id];
      }
    });
  });
});
jQuery(document).ready(function() {
  jQuery("textarea.form-textarea").css("color", inactive_color);
  var default_values = new Array();
  jQuery("textarea.form-textarea").focus(function() {
    if (!default_values[this.id]) {
      default_values[this.id] = this.value;
    }
    if (this.value == default_values[this.id]) {
      this.value = '';
      this.style.color = active_color;
    }
    jQuery(this).blur(function() {
      if (this.value == '') {
        this.style.color = inactive_color;
        this.value = default_values[this.id];
      }
    });
  });
}); 
 /*  jQuery(".webform-client-form input:text, .webform-client-form textarea").each(function(i){
                jQuery(this).data("default", this.value).bind("focus", function(e){
                     if (jQuery.trim(this.value)==jQuery(this).data("default")) this.value = "";
                }).bind("blur", function(e){
                     if (jQuery.trim(this.value).length==0) this.value = jQuery(this).data("default");
                });
       }); */

then i add this line to mytheme.info file, under ;scripts
scripts[] = js/clear-default.js

libbyy’s picture

libbyy commented

many thanks RoyE - your script works on my Drupal 7 install

vergil’s picture

vergil commented

Work great Thanks...