jQuery: Add a class to an input when a value is already entered when the page is loaded

Question

I'm using the follow jQuery code to style some inputs based on whether they are focused or if they have content in them.

$('.Textbox')
.focus(function() { $(this).addClass("selected") })
.blur(function() { if ($(this)[0].value == '') { $(this).removeClass("selected") } });

My problem is that some of my inputs are automatically filled in by the browser if the user is a returning visitor. Like username and password fields for example. Since the inputs have a value entered in them, I want to style them differently. Unfortunately the jQuery won't apply the styles until the user interacts with the input directly.

Is there any way that I can look to see if the input has a value (without the user interacting with the input) and then give it a class name?

Any help would be greatly appreciated.

have you tried the change event

BumbleB2na
– BumbleB2na

2011-08-17 16:41:40 +00:00
Commented Aug 17, 2011 at 16:41 — BumbleB2na
– BumbleB2na, Commented Aug 17, 2011 at 16:41

roselan · Accepted Answer · 2011-08-17 16:41:48Z

2

you can do it on "page load"

$(document).ready( function () {
    $('.Textbox').each( function () {
        $this = $(this);
        if ( this.value != '' ) $this.addClass('yourClass');        
    });
});

answered Aug 17, 2011 at 16:41

roselan

3,7651 gold badge23 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jkupczak Over a year ago

This worked perfectly. Did exactly what I needed it to, thanks!

Adam Fabicki · Accepted Answer · 2011-08-17 16:40:40Z

0

the focus() and blur() events are specific to user interaction. You should try the change() event in jQuery, as that gets fired when the value of an input changes, even if that change was triggered by a program and not just the user: http://api.jquery.com/change/

answered Aug 17, 2011 at 16:40

Adam Fabicki

5303 silver badges10 bronze badges

1 Comment

jkupczak Over a year ago

Thanks for the reply. I can see the applications, but unfortunately change() didn't help me on page load. Perhaps the browser auto-fills in the input fields too quickly for this event to trigger.

Collectives™ on Stack Overflow

jQuery: Add a class to an input when a value is already entered when the page is loaded

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related