Question

您在浏览器中使用什么来支持占位符属性？

目前，我正在使用：

https://github.com/mathiasbynens/Placeholder-jQuery-Plugin

也试过这个插件无济于事：

https://github.com/danbentley/placeholder

但它似乎不适用于IE ...更具体地说是IE 8.任何其他建议/替代方案？

我现在应该忘记占位符属性吗？

Answer 1

你是对的，IE8不支持placeholder属性。 placeholder是HTML5规范的一部分，IE8在HTML5被人们想到之前发布了很长时间。

以无缝方式处理它的最佳方法是使用Modernizr之类的工具来检测浏览器是否支持占位符功能，如果不支持，则运行JS polyfill脚本。

if(!Modernizr.input.placeholder) {
    //insert placeholder polyfill script here.
}

有许多占位符polyfill脚本可供下载。选择一个使用placeholder属性的方法，这样您只需要在一个位置为所有浏览器定义占位符字符串。您可以尝试以下方法：http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

希望有所帮助。

Answer 2

这里的代码直接来自我的项目，它本身在chrome中工作，并在IE8中使用polyfill ...这里有一个警告，用于测试，显示何时调用polyfill。您需要加载modernizr作为使用此代码的先决条件，但在<head>部分中包含一个简单的脚本即可。

<script type="text/javascript">
    $('document').ready(function () {
        if (!Modernizr.input.placeholder) {
            $('[placeholder]').focus(function() {
                var input = $(this);
                if (input.val() == input.attr('placeholder')) {
                    input.val('');
                    input.removeClass('placeholder');
                }
            }).blur(function() {
                var input = $(this);
                if (input.val() == '' || input.val() == input.attr('placeholder')) {
                    input.addClass('placeholder');
                    input.val(input.attr('placeholder'));
                   }
            }).blur();

            $('[placeholder]').parents('form').submit(function() {
                $(this).find('[placeholder]').each(function() {
                    var input = $(this);
                    if (input.val() == input.attr('placeholder')) {
                        input.val('');
                    }
                })
            });

            alert("no place holders");
        }
    });
</script>

Answer 3

placeholder属性有很多polyfill脚本。这是one that seems to work well。

请记住在JS代码中调用$('input, textarea').placeholder();，并可能添加CSS规则，例如。 .placeholder { color: #aaa }。

Answer 4

通过我一直在关注的所有其他答案和示例，我发现了一些问题。我编写了自己的解决方案来解决这些问题并决定在此发布。我的代码将正确处理其他解决方案似乎有问题的两件事是：

如果您确实想要将占位符中包含的文本作为值输入，我的代码将不会认为这是占位符并丢弃您的输入。
如果按IE中的刷新按钮，则不会使用占位符值自动填充字段。

包括Modernizr和JQuery如下：

<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="modernizr-2.6.2.js"></script>

添加一些CSS，例如：

<style type="text/css" media="all">
.placeholder {
    color: #aaa;
}
</style>

然后你需要的主要代码是：

<script type="text/javascript">

$(document).ready(function() {

    // Only do anything if the browser does not support placeholders
    if (!Modernizr.input.placeholder) {

        // Format all elements with the placeholder attribute and insert it as a value
        $('[placeholder]').each(function() {
            if ($(this).val() == '') {
                $(this).val($(this).attr('placeholder'));
                $(this).addClass('placeholder');
            }
            $(this).focus(function() {
                if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {
                    $(this).val('');
                    $(this).removeClass('placeholder');
                }
            }).blur(function() {
                if($(this).val() == '') {
                    $(this).val($(this).attr('placeholder'));
                    $(this).addClass('placeholder');
                }
            });
        });

        // Clean up any placeholders if the form gets submitted
        $('[placeholder]').parents('form').submit(function() {
            $(this).find('[placeholder]').each(function() {
                if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {
                    $(this).val('');
                }
            });
        });

        // Clean up any placeholders if the page is refreshed
        window.onbeforeunload = function() {
            $('[placeholder]').each(function() {
                if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {
                    $(this).val('');
                }
            });
        };
    }
});

</script>

Answer 5

事实上，截至2011年10月19日的IE都没有支持占位符属性。我已经在7,8和9中对它进行了测试，但似乎没有人认出它。你会想到ie9，看看它应该如何支持css3和html5会修复它，但它不会出现这种情况。

作为一个简单的解决方法，虽然不是很漂亮但是完成工作，你可以使用这样的一些javascript：

<input type="text" value="Enter ZIP"
  onfocus="if(this.value == 'Enter ZIP'){this.value = '';}" />

Answer 6

这是我在我的一个项目中使用的。唯一的问题是我只需要一个元素占位符，所以它可能不适合你的情况。但只是想知道代码有多简单：

(function(){
    var nameInput = document.getElementById('your-id-here');
    var placeHolderSupport = ("placeholder" in document.createElement("input"));
    if( !placeHolderSupport )
    {
        //show hint in gray
        var placeholder = nameInput.getAttribute('placeholder');
        nameInput.onfocus = function(){ if(this.value==placeholder){this.value='';this.className='';} };
        nameInput.onblur  = function(){ if(this.value==''){this.value=placeholder;this.className='placeholder';} };
        nameInput.onblur();
    }
})()

Answer 7

我自己也在努力。我找到了一个解决方法。它在我的IE8和chrome中运行得相当不错。我开发了一个很酷的工作，并在下面解释了......

HTML

 <input type="text" class="input-remover badinput" value="Business Name">
 <input type="text" class="input-remover badinput" value="Business Address 1">
 <input type="text" class="input-remover badinput" value="Business Address 2">
 <input type="text" class="input-remover badinput" value="City">

具有类输入 - 移除器的所有输入字段都将受到影响。只需将您想要用作占位符的单词放在值内。使用badinput类，以便您可以阻止某人使用默认值提交输入字段。

JQuery的

var textval

 $(".input-remover").click(function(){
textval = this.value;
$(this).addClass("currentspot");

if ($(this).hasClass("placeholder"))
{

}else{

$(this).val("");

}

 });


 $("input").keypress(function(){
$(".currentspot").removeClass("badinput");
$(".currentspot").addClass("placeholder");

 });


 $("input").blur(function(){

if ($(this).hasClass("placeholder"))
{


$(".currentspot").removeClass("currentspot");

}else{

$(".currentspot").val(textval);
$(".currentspot").removeClass("currentspot");

}

 });

老实说，我会解释这一部分，但我真的觉得它更容易说，不要编辑它。它的方式很好。是的，你可以修改它但我会避免它，除非你知道你在做什么来防止它起作用。

我还有一个JsFiddle，显示它有效。我希望它有所帮助。我认为大多数这些事情我都喜欢这个装备。但至少从那以后就成了。祝你好运！

小提琴Here

IE中不支持占位符属性。有什么建议？

7 个答案: