Javascript 输入样式不为'；我不在IE工作

我得到了一个有用的jQuery代码，不幸的是，它在Firefox中工作得很好，但在IE中却没有。任何人都知道问题出在哪里，以及如何在IE中执行相同的操作

谢谢， 保罗

我的代码如下

HTML

JQuery

<script type="text/javascript">
$(document).ready(function() {
    $('input[type="text"]').addClass("idleField");
    $('input[type="text"]').focus(function() {
        $(this).removeClass("idleField").addClass("focusField");
        if (this.value == this.defaultValue){
            this.value = '';
        }
        if(this.value != this.defaultValue){
            this.select();
        }
    });
    $('input[type="text"]').blur(function() {
        $(this).removeClass("focusField").addClass("idleField");
        if ($.trim(this.value == '')){
            this.value = (this.defaultValue ? this.defaultValue : '');
        }
    });
});
</script>

$（文档）.ready（函数（）{
$（'input[type=“text”]”）。addClass（“idleField”）；
$（'input[type=“text”]”）。焦点（函数（）{
$（this）.removeClass（“idleField”）.addClass（“focusField”）；
if（this.value==this.defaultValue）{
这个值=“”；
}
if（this.value！=this.defaultValue）{
这是select（）；
}
});
$（'input[type=“text”]”）。模糊（函数（）{
$（this）.removeClass（“focusField”）.addClass（“idleField”）；
如果（$.trim（this.value=''）{
this.value=（this.defaultValue？this.defaultValue:“”）；
}
});
});

在jQuery中，尝试替换：

'input[type="text"]'

与：

---

在jQuery中，尝试替换：

'input[type="text"]'

与：

试试这个：

<script type="text/javascript">
    $(document).ready(function() {

        var $input = $("#status"),
            defaultVal = $input[0].defaultValue;

        $input.addClass("idleField");

        $input.focus(function() {

            $input.toggleClass("idleField focusField");
            if ($input.val() === defaultVal) { $input.val(""); } 
            else { $input.select(); }

        });

        $input.blur(function() {

            $input.toggleClass("focusField idleField");
            if ($.trim($input.val()) === "") { $input.val(defaultVal); }

        });

    });
</script>

$（文档）.ready（函数（）{
变量$input=$（“#状态”），
defaultVal=$input[0]。defaultValue；
$input.addClass（“idleField”）；
$input.focus（函数（）{
$input.toggleClass（“idleField焦点字段”）；
如果（$input.val（）==defaultVal）{$input.val（“”；}
else{$input.select（）；}
});
$input.blur（函数（）{
$input.toggleClass（“focusField idleField”）；
if（$.trim（$input.val（））==“”）{$input.val（defaultVal）；}
});
});

试试这个：

<script type="text/javascript">
    $(document).ready(function() {

        var $input = $("#status"),
            defaultVal = $input[0].defaultValue;

        $input.addClass("idleField");

        $input.focus(function() {

            $input.toggleClass("idleField focusField");
            if ($input.val() === defaultVal) { $input.val(""); } 
            else { $input.select(); }

        });

        $input.blur(function() {

            $input.toggleClass("focusField idleField");
            if ($.trim($input.val()) === "") { $input.val(defaultVal); }

        });

    });
</script>

$（文档）.ready（函数（）{
变量$input=$（“#状态”），
defaultVal=$input[0]。defaultValue；
$input.addClass（“idleField”）；
$input.focus（函数（）{
$input.toggleClass（“idleField焦点字段”）；
如果（$input.val（）==defaultVal）{$input.val（“”；}
else{$input.select（）；}
});
$input.blur（函数（）{
$input.toggleClass（“focusField idleField”）；
if（$.trim（$input.val（））==“”）{$input.val（defaultVal）；}
});
});

我知道您想将标签放入inut框中。我认为这很好，但有一个更好、更“XHTML”的解决方案：

我认为最好使用默认标记，然后启用javascript，隐藏它们并复制到输入框中

我的代码：

(function($){
  /**
   *  This function moves the input <label> into the input field
   *  Creates a new input box with jquery clone, and changes the type to text, so the password fields label will be also visible. on focus and blr only the new input field will hided or shown, depended on the value of the original field.
   *  Example of usage:
   *  @code
   *    $("input#foo").inputLabel();
   *  @endcode
   *  
   *  @require jquery.js
   *  @param none
   *  @return none
   */
  $.fn.inputLabel = function() {
    var input = this
    var id;
    var label;
    var value;
    var isDefault;
    var fake;

    id = input.attr("id");                  //get the id of the input
    label = $("label[for="+id+"]").hide();  //search for the label and hide it
    value = label.html();                   //get the label text

    fake = input.clone();
    fake.attr("type","text");
    fake.attr("value",value);

    input.after(fake);
    input.hide();


    isDefault = true;

    var checkDefault = function() {
      if(input.attr("value")=='') {
        isDefault = true;
      }
      else {
        isDefault = false;
      }
    }

    fake.focusin(function() {
      if(isDefault) {
        fake.hide();
        input.show();
        input.focus();
      }
    });

    input.focusout(function() {
      if(isDefault) {
        input.hide();
        fake.show();
      }
    });

    input.keydown(function(event) {
        window.setTimeout(checkDefault,0);      
    });

    $(window).unload(function(){ //firefox bug fix.
      fake.attr("value","");
    });


    return this;
  }
})(jQuery);

---

在此之后，您可以轻松添加焦点或其他样式。

我知道您希望将标签放入inut框中。我认为这很好，但有一个更好、更“XHTML”的解决方案：

我认为最好使用默认标记，然后启用javascript，隐藏它们并复制到输入框中

我的代码：

(function($){
  /**
   *  This function moves the input <label> into the input field
   *  Creates a new input box with jquery clone, and changes the type to text, so the password fields label will be also visible. on focus and blr only the new input field will hided or shown, depended on the value of the original field.
   *  Example of usage:
   *  @code
   *    $("input#foo").inputLabel();
   *  @endcode
   *  
   *  @require jquery.js
   *  @param none
   *  @return none
   */
  $.fn.inputLabel = function() {
    var input = this
    var id;
    var label;
    var value;
    var isDefault;
    var fake;

    id = input.attr("id");                  //get the id of the input
    label = $("label[for="+id+"]").hide();  //search for the label and hide it
    value = label.html();                   //get the label text

    fake = input.clone();
    fake.attr("type","text");
    fake.attr("value",value);

    input.after(fake);
    input.hide();


    isDefault = true;

    var checkDefault = function() {
      if(input.attr("value")=='') {
        isDefault = true;
      }
      else {
        isDefault = false;
      }
    }

    fake.focusin(function() {
      if(isDefault) {
        fake.hide();
        input.show();
        input.focus();
      }
    });

    input.focusout(function() {
      if(isDefault) {
        input.hide();
        fake.show();
      }
    });

    input.keydown(function(event) {
        window.setTimeout(checkDefault,0);      
    });

    $(window).unload(function(){ //firefox bug fix.
      fake.attr("value","");
    });


    return this;
  }
})(jQuery);

---

---

在此之后，您可以轻松添加焦点或其他样式。

您可能需要说明IE的哪个版本不起作用also@NeXXeus，我是指聚焦效果。输入[type=“text”]@Joe，我看到并尝试了J.T.S建议的另一种方式，但在IESeems中不起作用，在IE7/8中无法很好地发挥作用，因为您可能想说明它在哪个版本的IE中不起作用also@NeXXeus，我是指聚焦效果。输入[type=“text”]@Joe，我看到并尝试了J.T.S建议的另一种方式，但在IESeems中无法通过良好的思维在IE7/8中工作，但jQuery的选择器是独立于浏览器的。这只适用于本机CSS@Paul-您可能想签出此URL。我不太确定这是否是你想要的，但他们似乎也遇到了同样的问题，并提出了解决方案：谢谢，@Pekka-我不知道。想法不错，但jQuery的选择器是独立于浏览器的。这只适用于本机CSS@Paul-您可能想签出此URL。我不太确定这是否是你想要的，但他们似乎也遇到了同样的问题，并想出了一个解决办法：谢谢，@Pekka-我不知道。这是@J.T.s.answerBtw的副本（基本上）。。。我贴的东西很有用。我在FF4、IE8和IE7中进行了测试。我复制了你的HTML和CSS，把你的jQuery换成了我的，它是有效的。我在写所有代码的时候，在有0个答案的时候测试它是我的观点。更不用说我对他的代码做了一点修改。@Paul-在IE7和IE8中，使用上述解决方案，我得到了一个灰色框，其中

.idleField

的边框为深灰色，而

.focusField

的边框为浅蓝色。这不是你所期望的吗？@Paul-如果你想要一个已经包含文档的版本，作为JSFIDLE默认设置的一部分，请在这里查看它。这是@J.T.S.answerBtw的副本（基本上）。。。我贴的东西很有用。我在FF4、IE8和IE7中进行了测试。我复制了你的HTML和CSS，把你的jQuery换成了我的，它是有效的。我在写所有代码的时候，在有0个答案的时候测试它是我的观点。更不用说我对他的代码做了一点修改。@Paul-在IE7和IE8中，使用上述解决方案，我得到了一个灰色框，其中

.idleField

的边框为深灰色，而

.focusField

的边框为浅蓝色。这不是您所期望的吗？@Paul-如果您想要一个已经包含文档的版本，作为JSFIDLE默认值的一部分，请在这里查看它。

<label for="register-username">username</label> <input id="register-username" type="text" class="register-ok" />
<label for="register-password">password</label> <input id="register-password" type="password" class="register" />

   $("#register-username,register-password").each($(this).inputLabel(););