입력 스타일이 IE에서 작동하지 않습니다

Question

불행히도 유용한 Firefox에서 작동하지만 IE에서는 유용하지 않은 jQuery 코드가 있습니다. 아무도 문제가 무엇인지, IE에서 동일한 작업을 수행하는 방법을 알 수 있습니다.

덕분에, 폴

는 내 코드는 JQuery와

#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; 
    } 

HTML

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

CSS 아래에 주어진다 당신의 jQuery를에 43,210

Answer 1

이 시도 : 난 당신이 inut 상자에 레이블을 넣을 참조

<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

는 교체 시도 :

'input[type="text"]' 

로 :

'#status' 

Answer 3

합니다. 나는 이것이 좋다고 생각하지만 더 좋은 "XHTML"솔루션이있다 :

나는 태그를 기본으로 사용하고 자바 스크립트를 사용하면 숨기고 입력란에 복사하는 것이 더 좋을 것이라고 생각한다.

내 코드 :

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

이 플러그인은 나에 의해 작성되었습니다. 쉽게 초점 등을 추가 할 수 있습니다이 후

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

을 : 수 있도록

<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 코드를 : 당신이 사용하려는 경우

, 난 당신이 그런 식으로 이것을 사용한다고 생각합니다 스타일.