placeholder не работает в IE9

Question

Я разработчик Salesforce (SFDC). На моей странице visualforce для окна ввода я использую код заполнителя.

<div class="control-group"> 
    <label class="control-label visible-desktop" for="first_name">First Name</label> 
    <div class="controls"> 
     <input class="input-block-level" name="First Name" id="first_name" placeholder="First Name" value="" type="text" required="required" autofocus="autofocus" /> 
    </div> 
</div> 

Я проверил в интернете некоторые хаки CSS, но я их не нашел. Я нахожу javascript hack.

HTML5 Заполнитель JQuery плагин

https://github.com/mathiasbynens/jquery-placeholder

Demo & Примеры

http://mathiasbynens.be/demo/placeholder

Но я не хочу использовать JQuery взломать или что-то.

Answer 1

В IE9 не поддерживает атрибут заполнитель, вы можете сделать это в JavaScript/JQuery, как так (быстро написано, не тестировался):

if(navigator.appVersion.match(/MSIE [\d.]+/)){ 
    var placeholderText = 'Some Placeholder Text'; 
    $('#first_name').val(placeholderText); 
    $('#first_name').blur(function(){ 
     $(this).val() == '' ? $(this).val(placeholderText) : false; 
    }); 
    $('#first_name').focus(function(){ 
     $(this).val() == placeholderText ? $(this).val('') : false; 
    }); 
} 

Сделайте то же самое для случая размытия тоже, то, что будет имитировать атрибут заполнителя.

[Редактировать]

Хорошо, после переосмысления этого (из-за комментария) это действительно не самое элегантное решение (однако это делает работу), так что я бы игнорировать этот ответ полностью.

Answer 2

if(navigator.appVersion.match(/MSIE [\d.]+/)){ 
    $(document).find("input[placeholder]").each(function(){ 
     if($.trim($(this).val()) == ""){ 
      $(this).val($(this).attr("placeholder")).addClass('placeholder'); 
     } 
     $(this).on("focus",function(){ 
      $(this).hasClass('placeholder') ? $(this).val('').removeClass('placeholder') : false; 
     }).on("blur",function(){ 
      $(this).val() == '' ? $(this).val($(this).attr("placeholder")).addClass('placeholder') :false;   
     }); 
    });  
} 

Answer 3

Немного проще ответ работал для меня, не будучи очень доверчив Regex (мой Downfall)

function setPlaceHolderForIE9() { 
    var pos = window.navigator.userAgent.indexOf("MSIE"); 

    if (pos > 0) { 
     if (window.navigator.userAgent.substring(pos + 5, window.navigator.userAgent.indexOf(".", pos)) < 10) { 
      //alert($("input[placeholder]").val($("input[placeholder]").attr("placeholder"))); 
      $("input[placeholder]").each(function() { 
       $(this).val($(this).attr("placeholder")); 
      }); 

      $("input[placeholder]").click(function() { 
       if ($(this).val() === $(this).attr("placeholder")) { 
        $(this).val(''); 
       } 
      }); 

      $('input[placeholder]').blur(function() { 

       if ($.trim($(this).val()).length === 0) { 
        $(this).val($(this).attr("placeholder")); 
       } 
      }); 


     } 
    } 
}