I have three inputs. I want them all to start and end with the

Question

0

Asked: May 26, 20262026-05-26T10:58:44+00:00 2026-05-26T10:58:44+00:00

I have three inputs. I want them all to start and end with the

0

I have three inputs. I want them all to start and end with the same width but in the event one of them is clicked, i want that one to increase width and ALL THE OTHERS to decrease widths. Is there a way that, if one input is focused and the others are NOT focused but NOT YET blurred, I can apply a new class to the inputs?

A sort of working model can be found at: http://testserver1.staceylanehosting.net

Here is my jQuery code:

    $(document).ready(function() {
$('#wrapper-newsletter input[type="text"]').addClass("idleField");
$('#wrapper-newsletter input[type="text"]').focus(function() {
    $(this).removeClass("idleField").addClass("focusField");
    if (this.value == this.defaultValue){
        this.value = '';
    }
    if(this.value != this.defaultValue){
        this.select();
    }
});
$('#wrapper-newsletter input[type="text"]').blur(function() {
    $(this).removeClass("focusField").addClass("idleField-shrink");
    if ($.trim(this.value == '')){
        this.value = (this.defaultValue ? this.defaultValue : '');
    }
});

});

Here is the HTML Markup:

        <div id="wrapper-newsletter" class="grid_8">
    <h4>Receive Updates</h4>
    <p>To recieve notifications when our site is updated, enter your email address and name below!</p>
    <form>
        <input type="text" class="idleField" name="newsletter-name" value="Name" />
        <input type="text" class="idleField" name="newsletter-surname" value="Surname" />
        <input type="text" class="idleField" name="newsletter-email" value="Email" />
        <a href="#" title="Subscribe" class="button-blue">
            <span>Subscribe</span>
        </a>
    </form>
</div><!-- div#wrapper-newsletter -->

And the relevant CSS:

    #wrapper-newsletter input[type=text] { width: 102px; }
    .idleField { }
    .idleField-shrink{ width: 63px !important; }
    #wrapper-newsletter input[type=text]:focus { width: 180px; }