Question

I want to do simple thing:
If input field is empty – have opacity:0.5
If field is not empty – have opacity 1.

I faced a problem:
When browser completes the username or password automatically – event is not triggered.

Obviously this doesn’t work:

.change()

this doesn’t work too:

//CSS
selector:not(:empty){stuff1}
selector:empty{stuff2}

But I couldn’t find any other clear solutions that work.

Edit:
I know how to change opacity.
I know how to select empty or non-empty field in jQuery.
I don’t know how to trigger event when browser completes the login form.
This can be on page load, but can also be later (say he puts in username himself, and password is put automatically)

Answer 1

$(function(){
  if($('#myInput').val().length === 0){
    $('#myInput').fadeTo(0, 0.5);
  }
});

You could check the value length…. This triggers on document ready.

Any change handler would be pretty redundant, as they’d most likely be entering value… but I guess you can attach it to a change handler if you wanted. You’d just be wary to target the inputs using $(this), so you don’t fade out your whole form when someone starts typing in one input.