IE8および9でプレースホルダー属性をサポートする方法


132

小さな問題がありplaceholderます。IE8-9では入力ボックスの属性がサポートされていません。

私のプロジェクト(ASP Net)でこのサポートを行うための最良の方法は何ですか。私はjQueryを使用しています。他の外部ツールを使用する必要がありますか?

あるhttp://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html良いソリューションは?


7
ペダントのコーナー:タグではなく属性です。タグの周りにはとがった角括弧があります(など<input>)。属性は、(のようにplaceholder="This is an attribute value")角括弧内のキーと値のペアです。質問をそのままにして、同じ質問をする将来の人々がそれを見つけられるようにします。
ポールD.ウェイト

2
そのリンクはそのままでは機能しませんでした。$( "[placeholder]")セレクターの周りの余分な引用符を削除したところ、問題はありませんでした。
claptime 2013

1
そのリンクのソリューションも、Webkitのネイティブサポートに従ってパスワードボックスを処理しません
geedubb

1
あなたが与えたリンクは確かに非常にうまく機能します-パスワードを除いてそれは御馳走として機能し、セットアップが簡単ではありませんでした
hobailey

1
リンクは偉大な修正です
Pixelomo

回答:


89

このjQueryプラグインを使用できます:https : //github.com/mathiasbynens/jquery-placeholder

しかし、あなたのリンクも良い解決策のようです。


2
質問で提案されたリンクが機能しませんでした。フォームの送信に問題がありました。この回答で提案した解決策は、はるかに堅牢で、ごちそうになりました。
ジョニーホワイト

実際にこれを試してみましたが、正常に機能します。ただし、フォームとパスワードフィールドを含むライトボックスをロードするとすぐに、すべてが機能しますが、パスワードフィールドは機能しません-空です。
Jurik、2013

6
IE8のパスワードプレースホルダーはドットで
囲ま

ie8でも見ることができません。ie8の場合、フィールドの上にテキストを表示するだけで回避しました。
jhawes

jQueryプレースホルダーの動作は異なります。これは、ユーザーがFirefoxでのプレースホルダーの通常の動作のように、フィールドに何かを入力し始めるときではなく、フォーカスのあるプレースホルダーを削除します。
supertonsky 2017

89

次のいずれかのポリフィルを使用できます。

これらのスクリプトは、placeholder属性をサポートしないブラウザーでの属性のサポートを追加し、jQueryを必要としません。


4
jQuery以外のソリューションのアイデアが気に入ったので、これに賛成しましたが、現在、このコードにはIE8で問題があり、私には適していません。github.com/jamesallardice/Placeholders.js/issues/17
Dan Searle

3
このソリューションはパスワードボックスを処理しません
Jurik

2
@Jurikポリフィルを追加しました-お役に立てば幸いです。
starbeamrainbowlabs 2013

1
このプラグインのディストリビューターでさえ、このプラグインは< IE9github.com/jamesallardice/Placeholders.js/issues/…の
Jurik

パスワードフィールドは、iE8ではまだ機能しません。受け入れられた回答リンクは、IE8のパスワードフィールドで機能するようです。
Susie、

24

$ .Browser.msieはもはや最新のjQueryの上にありません...あなたが使用する必要が$ .supportを

以下のように:

 <script>

     (function ($) {
         $.support.placeholder = ('placeholder' in document.createElement('input'));
     })(jQuery);


     //fix for IE7 and IE8
     $(function () {
         if (!$.support.placeholder) {
             $("[placeholder]").focus(function () {
                 if ($(this).val() == $(this).attr("placeholder")) $(this).val("");
             }).blur(function () {
                 if ($(this).val() == "") $(this).val($(this).attr("placeholder"));
             }).blur();

             $("[placeholder]").parents("form").submit(function () {
                 $(this).find('[placeholder]').each(function() {
                     if ($(this).val() == $(this).attr("placeholder")) {
                         $(this).val("");
                     }
                 });
             });
         }
     });
 </script>

2
魔法のように、この作品は、私のようなそれは、より良いプラグインを追加するよりも、おかげでたくさん
LemonCool

@vsyncいいえ、よく読んでいれば、プラグイン、複数形、ほとんどのオプションで、大量のコードと数行で複数のファイルを使用する必要があることがわかりました。あなたは少し傲慢ではありませんか、そしてそのコメントはどのようにして答えを改善しますか
LemonCool

これは実際には使用しないでください。これはjQueryの内部使用のためのもので、いつでも削除できます。api.jquery.com/category/deprecated/deprecated-1.9
ウィル

3

jqueryを使用する場合は、このようにすることができます。このサイトからJqueryを使用したプレースホルダー

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

これらは代替リンクです

  1. プレースホルダーjqueryライブラリ
  2. HTML5ポリフィル -プレースホルダーセクションに移動

3
この回答は機能しますが、完全な機能を使用するにはリンクをクリックする必要があります。ここのコードだけでは機能しません。
Hawkee 2013年

1
ofcそれは動作しません、これは馬鹿げたコードです!なぜあなたはsubmitイベントのために何度も何度も同じ「フォーム」をバインドするのですか?送信イベントは何に関係しているのですか
vsync '25年

IE8のプレースホルダーテキストと同じテキストを入力するとどうなりますか?
Bimal Das 2017

3

私が試したいくつかのプラグインとの互換性の問題がありました。これはテキスト入力のプレースホルダーをサポートする最も簡単な方法のようです:

function placeholders(){
    //On Focus
    $(":text").focus(function(){
        //Check to see if the user has modified the input, if not then remove the placeholder text
        if($(this).val() == $(this).attr("placeholder")){
            $(this).val("");
        }
    });

    //On Blur
    $(":text").blur(function(){
        //Check to see if the use has modified the input, if not then populate the placeholder back into the input
        if( $(this).val() == ""){
            $(this).val($(this).attr("placeholder"));
        }
    });
}

IE9をサポートしていますか?
Viku

2
$(function(){    
    if($.browser.msie && $.browser.version <= 9){
        $("[placeholder]").focus(function(){
            if($(this).val()==$(this).attr("placeholder")) $(this).val("");
        }).blur(function(){
            if($(this).val()=="") $(this).val($(this).attr("placeholder"));
        }).blur();

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

これを試して


1

私はこれを使っています、それはJavaScriptだけです。

私は単純に値を持つinput要素を持ち、ユーザーがinput要素をクリックすると、値のないinput要素に変更されます。

CSSを使用して、テキストの色を簡単に変更できます。プレースホルダーの色はID #IEinputの色であり、入力したテキストの色はID #emailの色です。プレースホルダーをサポートしていないIEのバージョンはgetElementsByClassNameもサポートしていないため、getElementsByClassNameを使用しないでください

元のパスワード入力のタイプをテキストに設定することにより、パスワード入力でプレースホルダーを使用できます。

Tinker:http : //tinker.io/4f7c5/1-JSfiddleサーバーがダウンしています!

*私の悪い英語をごめんなさい

ジャバスクリプト

function removeValue() {
    document.getElementById('mailcontainer')
        .innerHTML = "<input id=\"email\" type=\"text\" name=\"mail\">";
    document.getElementById('email').focus(); }

HTML

<span id="mailcontainer">
    <input id="IEinput" onfocus="removeValue()" type="text" name="mail" value="mail">
</span>

3
フィールドが空でフォーカスが失われた場合、プレースホルダーは戻る必要があります
Chris Pratt

1

ここに着陸する他の人のために。これは私のために働いたものです:

//jquery polyfill for showing place holders in IE9
$('[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('');
        }
    })
});

これをscript.jsファイルに追加するだけです。礼儀http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html


0

ほとんどのソリューションはjQueryを使用しているか、私が望んでいたようにこれで満足できるものではないため、mootoolsのスニペットを自分で作成しました。

function fix_placeholder(container){
    if(container == null) container = document.body;

    if(!('placeholder' in document.createElement('input'))){

        var inputs = container.getElements('input');
        Array.each(inputs, function(input){

            var type = input.get('type');

            if(type == 'text' || type == 'password'){

                var placeholder = input.get('placeholder');
                input.set('value', placeholder);
                input.addClass('__placeholder');

                if(!input.hasEvent('focus', placeholder_focus)){
                    input.addEvent('focus', placeholder_focus);
                }

                if(!input.hasEvent('blur', placeholder_blur)){
                    input.addEvent('blur', placeholder_blur);
                }

            }

        });

    }
}

function placeholder_focus(){

    var input = $(this);    

    if(input.get('class').contains('__placeholder') || input.get('value') == ''){
        input.removeClass('__placeholder');
        input.set('value', '');
    }

}

function placeholder_blur(){

    var input = $(this);    

    if(input.get('value') == ''){
        input.addClass('__placeholder');
        input.set('value', input.get('placeholder'));
    }

}

私はそれが他のものより少し多く見えるように告白しますが、それはうまく働きます。 __placeholderは、プレースホルダーテキストの色を派手にするccsクラスです。

私が使用しfix_placeholderwindow.addEvent( 'domready'が、...また、ポップアップのような追加で追加されたコードにも使用しました。

あなたがそれを好き願っています。

敬具。



0
<input type="text" name="Name" value="Name" onfocus="this.value = ''" onblur=" if(this.value = '') { value = 'Name'}" />

0

以下のコードを追加してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="https://code.google.com/p/jquery-placeholder-js/source/browse/trunk/jquery.placeholder.1.3.min.js?r=6"></script>
    <script type="text/javascript">
        // Mock client code for testing purpose
        $(function(){
            // Client should be able to add another change event to the textfield
            $("input[name='input1']").blur(function(){ alert("Custom event triggered."); });    
            // Client should be able to set the field's styles, without affecting place holder
            $("textarea[name='input4']").css("color", "red");

            // Initialize placeholder
            $.Placeholder.init();

            // or try initialize with parameter
            //$.Placeholder.init({ color : 'rgb(255, 255, 0)' });

            // call this before form submit if you are submitting by JS
            //$.Placeholder.cleanBeforeSubmit();
        });
    </script>

https://code.google.com/p/jquery-placeholder-js/downloads/detail?name=jquery.placeholder.1.3.zipから完全なコードとデモをダウンロードします


0

以下は、IE 8以下のプレースホルダーを作成するjavascript関数で、パスワードにも使用できます。

/* Function to add placeholders to form elements on IE 8 and below */
function add_placeholders(fm) {	
	for (var e = 0; e < document.fm.elements.length; e++) {
		if (fm.elements[e].placeholder != undefined &&
		document.createElement("input").placeholder == undefined) { // IE 8 and below					
			fm.elements[e].style.background = "transparent";
			var el = document.createElement("span");
			el.innerHTML = fm.elements[e].placeholder;
			el.style.position = "absolute";
			el.style.padding = "2px;";
			el.style.zIndex = "-1";
			el.style.color = "#999999";
			fm.elements[e].parentNode.insertBefore(el, fm.elements[e]);
			fm.elements[e].onfocus = function() {
					this.style.background = "yellow";	
			}
			fm.elements[e].onblur = function() {
				if (this.value == "") this.style.background = "transparent";
				else this.style.background = "white";	
			}		
		} 
	}
}

add_placeholders(document.getElementById('fm'))
<form id="fm">
  <input type="text" name="email" placeholder="Email">
  <input type="password" name="password" placeholder="Password">
  <textarea name="description" placeholder="Description"></textarea>
</form>


-1
    <script>
        if ($.browser.msie) {
            $('input[placeholder]').each(function() {

                var input = $(this);

                $(input).val(input.attr('placeholder'));

                $(input).focus(function() {
                    if (input.val() == input.attr('placeholder')) {
                        input.val('');
                    }
                });

                $(input).blur(function() {
                    if (input.val() == '' || input.val() == input.attr('placeholder')) {
                        input.val(input.attr('placeholder'));
                    }
                });
            });
        }
        ;
    </script>

$ .browser.msieはサポートされなくなりました。代わりに機能検出を使用してください。
14
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.