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

因此，通过将width: 200px;添加到我的defaultText课程，我就可以解决问题。

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

Answer 2

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

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

Demo

$ .removeAttr（）调整输入文本的大小

2 个答案: