[support] The quest for a fully Bi-Lingual site

J-P Stacey jp.stacey at torchbox.com
Tue Aug 21 16:22:39 UTC 2007


Neil: esl-lounge.com wrote:
>     <input type="text" id="indexsearch_box" name="search" value="enter
>     keyword here" onFocus="this.className='active';
>     if(this.value=='enter keyword here')this.value='';"
>     onblur="if(this.value=='')this.value='enter keyword
>     here';this.className='passive';">

Bleagh. Tag soup! It's best to separate your Javascript handlers off into 
Javascript completely, rather than having onfocus and onblur attributes 
around the place. Assuming you've still got jQuery on your page, you could 
do some nice encapsulated Javascript instead of this, and it would work better:

   HTML:
	...
	<!-- No on* attributes at all: -->
	<input type="text" id="indexsearch_box" value="" name="..." (etc.)/>
	<!-- Hidden field with the onblur text stored in it -->
	<input type="hidden" id="orig_text" value="enter keyword here"/>
	...

   Javascript in static separate file:

	Keyword = {
           // focus function
  	  inputFocus: function() {
	    if ( this.value != jQuery('#orig_text').get(0).value ) {
               this.value = '';
             }
  	  },

           // blur function
  	  inputBlur: function() {
             if (this.value == '') {
               this.value = jQuery('#orig_text').get(0).value;
             }
	  }

	  go: function() {
             // tie the two functions to the Javascript
  	    jQuery('#indexsearch_box').focus(Keyword.inputFocus
   	      ).blur(Keyword.inputBlur
             // Run the blur function to put the text there
	      ).blur();

	  }
	};

         // Run the Keyword.go() function when the page is ready
	jQuery(document).ready(Keyword.go);

That way, you can replace the value of that hidden field with e.g. 
translated text, and have it on the PHP-created page separate from the 
static JS.

Cheers,
J-P
-- 
J-P Stacey
+44 (0)1608 811870
http://torchbox.com


More information about the support mailing list