Проблема с вводом Topbar в Bootstrap css в ie

Question

Когда я создаю поле ввода в верхней панели с помощью начальной загрузки CSS, значение заполнителя отображается во всех браузерах, кроме IE.Но на твиттере они как-то делают его видимым (не javascript, потому что я отключил скрипты и протестировал).Кто-нибудь может мне помочь?

Answer 1

У меня были похожие проблемы, и я подделал ту же функциональность заполнителя для IE, делая это.

<script type="text/javascript">
 $(function() {
    if(!$.support.placeholder) { 
        var active = document.activeElement;
        $(':text').focus(function () {
            if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
                $(this).val('').removeClass('hasPlaceholder');
            }
        }).blur(function () {
            if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
                $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
            }
        });
        $(':text').blur();
        $(active).focus();
        $('form').submit(function () {
            $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
        });
    }
});
</script>

Источник: http://www.cssnewbie.com/cross-browser-support-for-html5-placeholder-text-in-forms/

Answer 2

Было бы неплохо увидеть ваш код, но я предполагаю, что вы установили атрибут placeholder = "my placeholder" во входном теге.Это новая функциональность HTML5, поэтому она работает без JavaScript.

Есть несколько причин, по которым я могу подумать, почему это не работает.

1. Правильно установите ваш тип документа в html, что указывает на html5.
2. Убедитесь, что до объявления типа документа ничего нет, даже пустых строк.
3. Установите свой css-стили правильно.Вам придется использовать префикс поставщика, поскольку это относительно новая функция:

---

::-webkit-input-placeholder { color:#999; };
:-moz-placeholder { color:#999; };
:-ms-input-placeholder { color:#999; };
:placeholder { color:#999; };
.placeholder { color:#999; };