占位符在 IE9 中不起作用答案

【问题标题】：placeholder is not working in IE9占位符在 IE9 中不起作用
【发布时间】：2013-07-15 19:41:42
【问题描述】：

我是销售人员 (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 hack，但我没有找到任何东西。我发现了一些 javascript hack。

HTML5 占位符 jQuery 插件

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

演示和示例

http://mathiasbynens.be/demo/placeholder

但我不想使用 jQuery hack 什么的。

【问题讨论】：

IE9 确实支持占位符属性。检查您在 IE9 中提供的演示页面。有一条消息说浏览器原生支持它。
你必须使用 jQuery，因为旧的浏览器不支持它。
显然我的 IE9 发生了一些奇怪的事情，因为它可以正常工作。无论如何this answer 是一个非 jQuery 解决方案..
@Brainfeeder：IE 9 不支持placeholder attribute。
为什么不想使用 jQuery hack？您正在使用引导程序，因此您应该已经加载了 jQuery。使placeholder 在 IE 9 或更低版本中工作的唯一方法是使用 JavaScript/jQuery 解决方案。没有其他解决方案。

标签： jquery html twitter-bootstrap apex-code placeholder

【解决方案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;
    });
}

对 blur 事件也做同样的事情，那么它将模仿占位符属性。

[编辑]

好的，在重新考虑之后（由于评论），这确实不是最优雅的解决方案（但它确实有效），所以我会完全无视这个答案。

【讨论】：

尽管考虑它，但它会匹配任何 IE 版本，所以您可能想要更改 if 条件以仅匹配 [\d.]{1} 或其他东西（我的正则表达式不是很好)
从.focus 返回一个字符串什么都不做。你想做什么？
另一个问题是在提交表单时会提交占位符值。

【解决方案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;          
        });
    });     
}

【讨论】：

【解决方案3】：

一个更简单的答案对我不太信任正则表达式有用（我的失败）

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


        }
    }
}

【讨论】：