Question

I have input in HTML-page:

<input id="Name" name="Name" tabindex="0" type="text" value="Name:" />

I wrote javascript with jQuery to bind handlers for events “onfocus” and “onblur”:

<script type="text/javascript">
    var name = $("#Name");
    name.focus(function () {if ($(this).val() == "Name:") $(this).val('');});
    name.blur(function () {if ($(this).val() == "") $(this).val("Name:");});
</script>

So, when user chooses input, it’s value should become empty. If user doesn’t enter text in input and change focus, input’s value returns to ‘Name:’.

It works fine in Firefox, Internet Explorer and Opera, but it doesn’t work in Google Chrome. Furthemore, there is error in chrome debugger: “Uncaught TypeError: Object [object Object] has no method ‘focus'”.

How can I bind handlers with jQuery in Google Chrome?
Thanks!

Answer 1

Somehow Chrome doesn’t like your variable to be named “name” in this case. The following works

<script type="text/javascript"> 
    var name2 = $("#Name"); 
    name2.focus(function () {if ($(this).val() == "Name:") $(this).val('');}); 
    name2.blur(function () {if ($(this).val() == "") $(this).val("Name:");}); 
</script>