发表新帖
发表新帖

Placeholder attribute not supported in IE. Any suggestions?

后端 未结
关注
6 2079
走了就别回头了
走了就别回头了 2020-12-30 02:22

What do you all use to support placeholder attributes in browsers?

Currently, am using:

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

Ha

相关标签:
6条回答
  • 没有蜡笔的小新
    2020-12-30 02:44

    This is what I used in one of my projects. The only thing is that I only needed a placeholder on one element, so it might not work for your situation right away. But just to get the idea of how simple the code is:

    (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();
    }
})()
    0 讨论(0)
  • 终归单人心
    2020-12-30 02:47

    You're right that IE8 doesn't support the placeholder attribute. placeholder is part of the HTML5 spec, and IE8 was released a long time before HTML5 was thought of.

    The best way to deal with it in a seamless manner is to use a tool like Modernizr to detect whether the browser has support for the placeholder feature, and run a JS polyfill script if it isn't supported.

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

    There are numerous placeholder polyfill scripts out there to download. Pick one which makes use of the placeholder attribute so that you only need to define the placeholder string in one place for all browsers. Here's one you could try: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

    Hope that helps.

    0 讨论(0)
  • 臣服心动
    2020-12-30 02:54

    There are quite a few polyfill scripts for the placeholder attribute. Here's one that seems to work well.

    Just remember to call $('input, textarea').placeholder(); in your JS code, and possibly add a CSS rule, eg. .placeholder { color: #aaa }.

    0 讨论(0)
  • 予麋鹿
    2020-12-30 03:05

    In fact none of the IE's as of Oct 19th 2011 support the placeholder attribute. I've tested it in 7, 8, and 9 and none of them seem to recognize it. You'd think ie9, seeing as how it's supposed to support css3 and html5 would have fixed this but it does not appear so.

    As a simple workaround that isn't pretty but gets the job done you can use some javascript like this:

    <input type="text" value="Enter ZIP"
  onfocus="if(this.value == 'Enter ZIP'){this.value = '';}" />
    0 讨论(0)
  • 无人共我
    2020-12-30 03:07

    Here's code straight from my project that works natively in chrome and uses the polyfill in IE8... there's an alert in here for testing that shows when the polyfill is being called. You need modernizr loaded as a prerequisite to using this code but a simple script include in your <head> section will do.

    <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>
    0 讨论(0)
  • 耶瑟儿～
    2020-12-30 03:07

    With all the other answers and examples I've been looking at, I found some problems. I wrote my own solution to resolve these issues and decided to post it here. The 2 things my code will handle correctly that the other solutions seem to have problems with are:

    1. If you actually happen to want to input the text contained in the placeholder as the value, my code won't assume that this is the placeholder and discard your input.
    2. If you press the refresh button in IE, it doesn't autopopulate the fields with the placeholder values.

    Include Modernizr and JQuery as follows:

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

    Add some CSS such as:

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

    Then the main code you need is:

    <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>
    0 讨论(0)
 看不清?
提交回复
热议问题