Question

我得到了一个有用的jQuery代码，遗憾的是它在Firefox中工作得很好但在IE中却没有，任何人都可以告诉问题是什么以及如何在IE中做同样的操作。

谢谢，保罗

我的代码如下：

HTML

<input name="status" id="status" value="Type something here" type="text"/>

CSS

#status{
        width:150;
        padding:5px;
        outline:none;
        height:20px;
    }
    .focusField{
        border:solid 2px #73A6FF;
        background:#EFF5FF;
        color:#000;
    }
    .idleField{
        background:#EEE;
        color: #6F6F6F;
        border: solid 2px #DFDFDF;
    }

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>

Answer 1

试试这个：

<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>

Answer 2

我看到你想把标签放入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);

这个插件是我写的。

如果你想使用它，我认为你应该这样使用：

<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" />

和启用的JS代码：

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

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

Answer 3

在你的jQuery中，尝试替换：

'input[type="text"]'

使用：

'#status'

输入样式在IE中不起作用

3 个答案: