Question

I’m currently struggling with a jQuery function that adds the title of a text box as the default text until a user clicks on it. I only want a specific textbox to have this function applied to it so I have amended it with ‘title=”Search”‘ in an attempt to ensure it only enacts upon the field with the title search. However, this appears to have broken the functionality. Do anyone know what is wrong with the function below?

$('input[type="text" title="Search"]').each(function() {
    this.value = $(this).attr('title');
    $(this).addClass('text-label');

    $(this).focus(function() {
        if (this.value == $(this).attr('title')) {
            this.value = '';
            $(this).removeClass('text-label');
        }
    });

    $(this).blur(function() {
        if (this.value == '') {
            this.value = $(this).attr('title');
            $(this).addClass('text-label');
        }
    });
});

Answer 1

Try using $('input[type="text"][title="Search"]') instead.

When you are using attribute selectors in jQuery, each individual attribute needs to be written separately.

Update:

To make this work for an element within a certain div, try:

$('#id_of_the_div input[type="text"][title="Search"]')