jquery - $.removeAttr() 调整输入文本的大小

Question

当我在表单输入文本框上使用 jquery$.removeAttr()时，它会将文本框的大小调整大约 5 个像素。如果我不使用$.removeAttr()，那么文本框将正常工作。什么是交易？

我最终试图从文本框中删除浅灰色斜体 CSS 样式并具有正常样式的黑色文本。

为什么我的文本框要调整大小？

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

您可以通过为文本框指定固定宽度来解决此问题。这样，即使您删除了.defaultText类，文本框仍设置为定义的宽度。

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

演示

Answer 2

因此，通过添加width: 200px;到我的defaultText课程中，我能够解决这个问题。

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