Issue with focusout for a textbox

Question

I have a textbox which serves the purpose to enter any words that are to be searched and click the button beside it.

<input id="EnterText" class="lightcolor" type="text" size="50" value="Enter text" maxlength="50" name="EnterText">
<input id="ClickButton" type="image" value="Button" name="ClickButton" onclick="" src="">

As I'm from the front-end I thought of a good user experience design and entered some text Enter text in a light color which should go and change the class when the focus event happens and come back when the blur event happens. Accordingly, I wrote jQuery for it.

$(document).ready(function () {
    $('#EnterText').focusin(function () {
        alert("focus in");
        var res = document.getElementById("EnterText");
        document.getElementById("EnterText").value = "";
        res.setAttribute("class", "afterClick");
    });
    $('#EnterText').focusout(function () {
        alert("focus out");
        var res = document.getElementById("EnterText");
        document.getElementById("EnterText").value = "Enter Text";
        res.setAttribute("class", "lightcolor");
    });
    $('ClickButton').click(function () {
        alert("Click Button")
    });
});

As you can see I have tried out focusin, focus, blur and focusout, but I couldn't do the required thing as the moment I click the button the focusout event is triggered. In fact, the alert for ClickButton never appears. Because of this I'm unable to implement this focusout and focusin and my idea became a requirement now. I also noticed that the moment I click on the textbox focus out event is called first and then came focus in. All I need is a textbox which should have some content which guides the user and when he clicks he will enter the value and click on that button so that backend people will take care of the rest after getting this value.

Answer 1

You can easily do that with jQuery and a much prettier code.

Check this out: http://jsfiddle.net/webtiago/7BAyV/

Answer 2

You should consider using placeholder attribute instead of unnecessary javascript.

Example:

http://jsfiddle.net/FdKYW/1/