Question

hope you can help me!

I have a form, which has a large amount of inputs. These inputs have the initial class of inputLight, which uses light grey text. I have the following jQuery code to, on focus change the colour of text to inputDark, and on blur to change it back:

$('input').focus(function(){
$(this).attr('class', 'inputDark');})
.blur(function() {$(this).attr('class', 'inputLight');

This absolutely works. I also have the following code to delete the value of an input when it is first selected.

/* First time only, delete default text*/
$('input').one('focus', function(){
$(this).val('');});

That works too. Where am I going with this? Well, I have two input buttons, one for submitting the form and one for clearing it – but my problem lies not with validation.

When the user clicks either button, it of course, deletes it’s value. And changes the colour of the text.

I don’t want either event to happen to these buttons, which are named Submit Button and Clear Button.

I tried using:

/* Toggle gray/black text */
$('input').not('input[name=Submit Button]').not('input[name=Clear Button]').focus(function()     {$(this).attr('class', 'inputDark');}).blur(function() {$(this).attr('class', 'inputLight');   });

and:

/* First time only, delete default text*/
$('input').not('input[name=Submit Button]').not('input[name=Clear Button]').one('focus', function(){
$(this).val('');
});

Sorry for the bad markup there, I know it must look terrible.

With the .not() functions in there, neither function works, but the buttons work. Take out .not() and the effects work, but the buttons go haywire.

Can anyone help me here?

Answer 1

wouldn’t $('input:text') be more productive?

$('input:text').focus(function(){
$(this).attr('class', 'inputDark');})
.blur(function() {$(this).attr('class', 'inputLight');

/* First time only, delete default text*/
$('input:text').one('focus', function(){
$(this).val('');});