Заполнитель не работает в 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.

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

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

Демо и примеры

http://mathiasbynens.be/demo/placeholder

Но я не хочу использовать jQuery-хак или что-то в этом роде.

Answer 1

Поскольку IE9 не поддерживает атрибут placeholder, вы можете сделать это в 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 (мое падение)

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"));
                }
            });


        }
    }
}