I'd like to add a simple onFocus event to the Finder search field like so:

<input id="edit-test" name="test" value="" size="60" maxlength="128" class="form-text" type="text" value="Search here" onblur="if(this.value == '') { this.value='Search here'}" onfocus="if (this.value == 'Search here') {this.value=''}">

Can I add it through /sites/all/modules/finder/includes/form.inc or is it controlled through Drupal core?

Comments

damianrobinson’s picture

Something like this should work for you:

(function ($) {

  Drupal.behaviors.SearchForm = {
      attach: function() {
        $('.search-form  #edit-keys').val('Search here');
        
        $('.search-form #edit-keys').blur(function() {
          if ($(this).val() == '') {
            $(this).val('Search here');
          }
        }).focus(function(){
          if ($(this).val() == 'Search here') {
            $(this).val('')
          }
          });
     }
  }  
}

I would suggest attaching this to the page as an external .js file, or you could even embed it as inline javascript.

danielb’s picture

I would attach the .js file through your site-specific template or a site-specific module.
Don't edit any Drupal code files, or files from within contrib module directories. It will create hassles when upgrading.

danielb’s picture

Best way IMO with this is not to put a value (i.e. a val()) into the input, but rather to show the label "over" (not above) the input rather than before/above it. They're called "label over" scripts.

jQuery.fn.labelOver = function(overClass) {
	return this.each(function(){
		var label = jQuery(this);
		var f = label.attr('for');
		if (f) {
			var input = jQuery('#' + f);
			
			this.hide = function() {
			  label.css({ textIndent: -10000, display: 'none' })
			}
			
			this.show = function() {
			  if (input.val() == '') label.css({ textIndent: 0, display: 'block' })
			}

			// handlers
			input.focus(this.hide);
			input.blur(this.show);
		  label.addClass(overClass).click(function(){ input.focus() });
			
			if (input.val() != '') this.hide(); 
		}
	})
}

I found that code somewhere - try googling it to find where?

And then you trigger which form element you want it in like this (usually in yet another js file with all your little jquery snippets):

   $("#edit-email-wrapper label").labelOver("over-apply");

I guess then you'll need some css to nudge the label into the right spot

Then you have full creative control of what the text looks like - and the bonus is, it can be made to look different to what the user's typed text looks like, so they don't assume they've typed in "Search here" themselves.

Sorry if I didn't explain it well, my finger hurts

danielb’s picture

Status: Active » Fixed
tuzonghua’s picture

Thanks for the help!

tuzonghua’s picture

Status: Fixed » Closed (fixed)
gynekolog’s picture

Thank you, this work fine for me:

(function ($) {

  Drupal.behaviors.SearchForm = {
      attach: function() {
        $('.finder-form  #edit-autocomplete-textfield').val('Search here');

        $('.finder-form #edit-autocomplete-textfield').blur(function() {
          if ($(this).val() == '') {
            $(this).val('Search here');
          }
        }).focus(function(){
          if ($(this).val() == 'Search here') {
            $(this).val('');
          }
          });
     }
  }
}