web-dev-qa-db-ja.com

IEではプレースホルダー属性はサポートされていません。助言がありますか？

ブラウザーでプレースホルダー属性をサポートするために何を使用していますか？

現在、使用しています：

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

このプラグインも役に立たないように試しました：

https://github.com/danbentley/placeholder

しかし、IEでは動作しないようです...より具体的にはIE 8.その他の提案/代替案はありますか？

とりあえず、placeholder属性を忘れてしまうべきでしょうか？

jqueryinternet-explorerhtml
20
Christian Fazzini

IE8がplaceholder属性をサポートしていないのは当然です。 placeholderはHTML5仕様の一部であり、IE5はHTML5が考えられるずっと前にリリースされました。

それをシームレスに処理する最良の方法は、 Modernizr のようなツールを使用して、ブラウザーがプレースホルダー機能をサポートしているかどうかを検出し、サポートされていない場合はJSポリフィルスクリプトを実行することです。

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

ダウンロードできる多数のプレースホルダポリフィルスクリプトがあります。 placeholder属性を使用するものを1つ選択すると、すべてのブラウザーで1つの場所にプレースホルダー文字列を定義するだけで済みます。これがあなたが試すことができるものです： http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

お役に立てば幸いです。

14
Spudley

chromeでネイティブに動作し、IE8でポリフィルを使用する私のプロジェクトからの直接のコードはここにあります...ポリフィルがいつ呼び出されているかを示すテストのための警告がここにあります。このコードを使用するための前提条件ですが、単純なスクリプトが<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>
6
Dylan Hayes

私がこれまで見てきた他のすべての回答と例で、私はいくつかの問題を発見しました。これらの問題を解決するための独自のソリューションを作成し、ここに投稿することにしました。他のソリューションが問題を抱えているように見える私のコードが正しく処理する2つのことは次のとおりです。

  1. プレースホルダーに含まれるテキストを実際に値として入力したい場合、私のコードはこれがプレースホルダーであるとは想定せず、入力を破棄します。
  2. 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>
2
neelsg

Placeholder属性には、かなりの数のポリフィルスクリプトがあります。これが うまくいくようです です。

JSコードで$('input, textarea').placeholder();を呼び出し、CSSルールを追加することを忘れないでください。 .placeholder { color: #aaa }。

2
tuomassalo

実際、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 = '';}" />
1
weexpectedTHIS

これは私のプロジェクトで使用したものです。唯一のことは、1つの要素にプレースホルダーが必要なだけだったので、状況によってはすぐに機能しない可能性があります。しかし、コードがいかに単純であるかを理解するために：

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