Question

When i use jquery $.removeAttr() on a form input text box, it is resizing the text box by about 5 pixels. If i dont use $.removeAttr() then the textbox will work fine. What is the deal?

Im ultimately trying to remove the light-grey italic CSS style from the text box and have normal style black text.

Why is my textbox resizing?

html:

<style type="text/css">
   .defaultText{
       color: lightgrey;
       font-style: italic;
   }​
</style>

<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $('#email, #emailconfirm').live('focusin', function() {
        if(this.value == 'Email' || this.value == 'Confirmation Email'){
            $(this).val('').removeAttr('class');
        }            
    });
});

<form id="newsletter"  method="post" action="/mailist/?p=subscribe" name="subscribeform">
    <input type="text" name="email" id="email" class="defaultText" value="Email" autocomplete="on" size="30"/><br/>
    <script language="Javascript" type="text/javascript">addFieldToCheck("email","Email");</script>
    <input type="text" name="emailconfirm" id="emailconfirm" class="defaultText" value="Confirmation Email" autocomplete="off" size="30"/><br/>
    <script language="Javascript" type="text/javascript">addFieldToCheck("emailconfirm","Confirm your email address");</script>
    <input type="submit" id="go" name="subscribe" value="Subscribe" onClick="return checkform();">
</form>​

Answer 1

You can fix the issue by specifying a fixed width to the text boxes. This way, even when you remove the .defaultText class, the text boxes are still set to the defined width.

input[type="text"] {
  width: 200px;
}
.defaultText{
  color: lightgrey;
  font-style: italic;
}

Demo