輸入樣式在IE中不起作用

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

我看到您想將標簽放入輸入框。 我認為這很好，但是有一個更好，更多的“ 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'