输入样式在IE中不起作用

Question

I got a useful jQuery code, unfortunately its working great in Firefox but not in IE can anyone tell what was the problem and how to make the same action in IE too.

Thanks, Paul

My Code is given below

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

Try this:

<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

i see you want to put the labels into the inut box. i think this is good, but there is a better and more "XHTML" solution:

i think it would be better if you use default the tags and then if javascript enabled, hide them and copy into the input box.

my code:

(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);

this plugin is written by me.

if you want to use this, i think you should use this like that:

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

and the JS code to enable:

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

after this you can easily add focus or other styles.

Answer 3

In your jQuery, try replacing:

'input[type="text"]'

with:

'#status'