占位符在 IE9 中不起作用 [英] placeholder is not working in IE9

问题描述

我是 salesforce (SFDC) 开发人员.在我的输入框 Visualforce 页面中，我使用了占位符代码.

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

我在互联网上查看了一些 CSS hack，但没有找到.我发现了一些 javascript hack.

HTML5 占位符 jQuery 插件

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

演示 &例子

http://mathiasbynens.be/demo/placeholder

但我不想使用 jQuery hack 之类的东西.

解决方案

由于 IE9 不支持 placeholder 属性，您可以像这样在 Javascript/jQuery 中实现(快速编写，未测试):

if(navigator.appVersion.match(/MSIE [\d.]+/)){var placeholderText = '一些占位符文本';$('#first_name').val(placeholderText);$('#first_name').blur(function(){$(this).val() == '' ?$(this).val(placeholderText) : false;});$('#first_name').focus(function(){$(this).val() == placeholderText ?$(this).val('') : false;});}

对模糊事件也做同样的事情，然后模仿占位符属性.

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

I am salesforce (SFDC) developer. In my visualforce page for input box I am using placeholder code.

<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>

I checked in internet for some CSS hack but I didn't find any. I find some javascript hack.

HTML5 Placeholder jQuery Plugin

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

Demo & Examples

http://mathiasbynens.be/demo/placeholder

But I don't want to use jQuery hack or something.

解决方案

As IE9 doesn't support the placeholder attribute, you can do it in Javascript/jQuery like so (quickly written, not tested):

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

Do the same for the blur event too, then that will mimic a placeholder attribute.

[Edit]

Okay, after rethinking this (due to the comment) this is really not the most elegant solution (however it does work), so I would disregard this answer totally.

这篇关于占位符在 IE9 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！