jQuery .not() method not working correctly

Question

I'm trying to make all textareas remove default text on focus, except those of class "pre-fill". But the problem is the textareas of class "pre-fill" are still being selected and included.

Suggestions on how to fix this? Thanks.

jQuery(document).ready(function inputHide(){

    $('textarea, input:text, input:password').not($('.pre-fill')).focus(function() {
            if ($(this).val() === $(this).attr('defaultValue')) {
                $(this).val('');
            }
        }).blur(function() {
            if ($(this).val()==='') {
                $(this).val($(this).attr('defaultValue'))
            }
        });

});

Answer 1

You should not have the jQuery variable ($) within the .not method call. Try this:

.not('.pre-fill')

In the context of your code:

$('textarea, input:text, input:password').not('.pre-fill').focus(function() {
        if ($(this).val() === $(this).attr('defaultValue')) {
            $(this).val('');
        }
    }).blur(function() {
        if ($(this).val()==='') {
            $(this).val($(this).attr('defaultValue'))
        }
    });

Answer 2

You can also use the :not() selector.

Note that this.value is much more efficient than $(this).val(), since it's a direct access of a property of a DOM element instead of accessing the exact same property by first building a jQuery object and then calling a jQuery method.

$('textarea, input:text:not(.pre-fill), input:password:not(.pre-fill)')
   .focus(function() {           
        if (this.value === $(this).attr('defaultValue')) {
            this.value = "";
        }
    }).blur(function() {
        if (this.value === '') {
            this.value = $(this).attr('defaultValue');
        }
    });