ie中Bootstrap css中的Topbar输入问题答案

【问题标题】：Issue with Topbar input in Bootstrap css in ieie中Bootstrap css中的Topbar输入问题
【发布时间】：2012-02-04 14:28:14
【问题描述】：

当我使用引导 css 在顶部栏中创建输入框时，占位符值在除 IE 之外的所有浏览器中都可见。但是在 twitter 网站上，他们以某种方式使其可见（不是 javascript，因为我关闭了脚本并进行了测试）。有谁能帮帮我吗？

【问题讨论】：

标签： css internet-explorer input twitter-bootstrap

【解决方案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/

【讨论】：

我知道 javascript 解决方案，我已经提到“禁用 javascript 后它可以工作”

【解决方案2】：

很高兴看到您的代码，但我假设您在输入标签上设置了 placeholder="my placeholder" 属性。这是新的 HTML5 功能，所以它可以在没有 JavaScript 的情况下工作。

我能想到它不起作用的原因有几个。

将您的文档类型正确设置为 html，即 html5。
确保在 doctype 声明之前没有任何内容，甚至没有空行。
正确设置您的 css 样式。您必须使用供应商前缀因为它是一个相对较新的功能：

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

【讨论】：