Placeholder text for HTML search field

Question

I'm not a great JS coder so I need your expertises to look into my code (although nothing very special and it works fine) to see if it is good practise or not because I heard that dodgy JS coding might slow down the site especially when it comes to reading mouse or user events.

function textbox_clear_default(form_field, mouse_event)
{
    var field_data = (document.getElementById(form_field).value).replace(/ /gi, '');
    var lower_case = field_data.toLowerCase();

    if (form_field == 'text_site_search')
    {
        if (lower_case == 'sitesearch')
        {
            document.getElementById(form_field).value = '';
        }
    }

    if (mouse_event == 'onclick')
    {
        if (lower_case == 'sitesearch')
        {
            document.getElementById(form_field).value = '';
        }
    }

    if (mouse_event == 'onblur')
    {
        if (lower_case == 'sitesearch' || lower_case == '')
        {
            document.getElementById(form_field).value = 'Site Search';
        }
    }
}

<input id="text_site_search" type="text" name="text_site_search" value="Site Search" onclick="textbox_clear_default(this.id, 'onclick')" onblur="textbox_clear_default(this.id, 'onblur')" />

Answer 1

This is the way I would approach it. Live demo here: http://jsbin.com/iHEgalU/3/edit Sure, bad js can slow your site down. Something like this is going to be pretty fast no matter what you do (unless you go out of your way to make it slow), but better is better and I say it's good to write the best, fastest, and most totally rock-sauce code you possibly can. So here goes.

Some people may consider it overkill considering the simplicity of your task, but I prefer writing in a manner that allows me to easily expand my script while keeping everything tidy and following good practices. You can extract the improved logic and use it in whatever style you like. I have commented this quite a bit. Refer to the live demo where there are no comments if you'd rather see it that way.

<input id="text_site_search" type="text" name="text_site_search" value="Site Search">

Avoid inline event functions! Notice that I have removed them from the html and put them in the js where they belong! This is much cleaner! HTML can't "do" things, so it doesn't need to know about click functions.

var myStuff = {
  options: { //these will be defaults, used if a parameter is not passed to init()
    sel: '',
    placeholder: 'My Placeholder'
  },
  init: function(sel, placeholder) { //this will kick everything off, that's all we need to run, you can pass options in like this or by object. I tend to use objects, but no need here.
    if (sel) { this.options.sel = sel }
    if (placeholder) { this.options.placeholder = placeholder }
    //there are several ways you could replace the passed in options...this is just an example that's ok for this case. jQuery has a method called $.extend, for example

    var obj = this; //cache a reference to "this" which currently refers to "myStuff"
    var inputSearch = document.getElementById(sel); //search the dom for the element and cache the reference
    //no need to keep searching the dom for an element. Search once and store the result.

    inputSearch.addEventListener('focus', function() {
      if (this.value === obj.defaultValue) { //"this" refers to the element when inside an event handler
        this.value = '';
      }
    });

    inputSearch.addEventListener('blur', function() {
      if (this.value === "") {
         this.value = obj.defaultValue; 
      }
    });
  }
};

myStuff.init('text_site_search', 'Site Search');

The options thing here isn't really all that helpful given the simplicity. If this is all this will ever do, I'd probably just use the parameters directly (just use sel where you need it), but I wanted to demonstrate the concept.

Note: IE8 and lower do not support addEventListener. Look up the conditional that deals with that issue if needed.

The funny thing about this whole script is that it is remarkably similar to html5 placeholders, though older browsers won't support that.

<input type="text" name="text_site_search" placeholder="Site Search">

Answer 2

I'll just be short and blunt because I'm on a mobile phone:

Your JS solution is not reusable and quite naive. Consider for instance a user tabbing into your input.

Please just use the HTML placeholder attribute, it is meant for that.