Internet Explorerの入力プレースホルダー


175

HTML5 placeholderinput要素に属性を導入しました。これにより、グレー表示されたデフォルトのテキストを表示できます。

悲しいことに、IE 9を含むInternet Explorerはそれをサポートしていません。

すでにいくつかのプレースホルダーシミュレータースクリプトがあります。これらは通常、default-textを入力フィールドに入れて灰色にし、入力フィールドにフォーカスを合わせたらすぐに削除します。

このアプローチの欠点は、プレースホルダーテキストが入力フィールドにあることです。したがって:

  1. スクリプトは入力フィールドが空であるかどうかを簡単に確認できません
  2. サーバー側の処理では、データベースにプレースホルダーを挿入しないように、デフォルト値と照合する必要があります。

プレースホルダーテキストが入力自体にない解決策が欲しいです。

回答:


151

HTML5クロスブラウザーポリフィルの「Webフォーム:入力プレースホルダー」セクションを見ると、jQuery-html5-placeholderが1つありました。

私はIE9でデモを試してみましたが、それはあなた<input>をスパンで包み、ラベルをプレースホルダーテキストでオーバーレイしているようです。

<label>Text:
  <span style="position: relative;">
    <input id="placeholder1314588474481" name="text" maxLength="6" type="text" placeholder="Hi Mom">
    <label style="font: 0.75em/normal sans-serif; left: 5px; top: 3px; width: 147px; height: 15px; color: rgb(186, 186, 186); position: absolute; overflow-x: hidden; font-size-adjust: none; font-stretch: normal;" for="placeholder1314588474481">Hi Mom</label>
  </span>
</label>

他にもシムがありますが、全部は見ていませんでした。それらの1つであるPlaceholders.jsは、「依存関係がない(したがって、ほとんどのプレースホルダーポリフィルスクリプトとは異なり、jQueryを含める必要がない)」と宣伝しています。

編集:「どのように」「何を」することにもっと興味がある人のために、これを行うjQueryプラグインを作成するプロセスをウォークスルーする高度なHTML5プレースホルダーポリフィルを作成する方法。

また、FirefoxやChromeとは異なり、IE10でプレースホルダーテキストがフォーカスで消える方法については、IE10プレースホルダーをフォーカスに保つを参照してください。この問題の解決策があるかどうかは不明です。


2
IE7、IE8、IE9でうまく機能しました。
Mark Rummel、2012

2
そのプラグインはもうメンテナンスされておらず、多くの既知の問題があります。
Ian Dunn

13
反対票?回答には他のシムへのリンクが含まれていました。jQuery以外のものが含まれるように更新されました。
Kevin Hakanson、2012年

プラグインのgithubページはもう存在しません。こちらもう1つです。

1
入力が変更されるほどの大きさのファンではないため、以下のニックの回答を確認することをお勧めします。入力の値を変更するのではなく、透明オーバーレイを使用します
Nathan Tregillus

38

私の経験で最高のものであるhttps://github.com/mathiasbynens/jquery-placeholder(で推奨html5please.com)。http://afarkas.github.com/webshim/demos/index.htmlは、ポリフィルのはるかに広範なライブラリの中でも優れたソリューションを備えています。


3
jQuery-html5-placeholderでこれに+1します。これはより見栄えがよく、他のケースでは見落とされた一部のエッジケース(非表示フィールドなど)を処理します
andygeers

2
今回はStackOverflowが悪いアドバイスをしたと言ってしまいました。jQueryプレースホルダーは、IEをクリックしても入力をクリアしません。
firedev 2013

12

jQuery実装を使用すると、送信するときにデフォルト値を簡単に削除できます。以下に例を示します。

$('#submit').click(function(){
   var text = this.attr('placeholder');
   var inputvalue = this.val();  // you need to collect this anyways
   if (text === inputvalue) inputvalue = "";

   // $.ajax(...  // do your ajax thing here

});

あなたがオーバーレイを探していることを知っていますが、このルートの使いやすさを好むかもしれません(今、私が上で書いたことを知っています)。もしそうなら、私は自分のプロジェクトのためにこれを書きました、そしてそれは本当にうまくいき(jQueryが必要です)、あなたのサイト全体に実装するのにほんの数分しかかかりません。最初は灰色のテキスト、焦点が合っているときは薄い灰色、タイプしているときは黒いテキストが表示されます。また、入力フィールドが空の場合は常にプレースホルダーテキストが提供されます。

最初にフォームを設定し、プレースホルダー属性を入力タグに含めます。

<input placeholder="enter your email here">

このコードをコピーして、placeholder.jsとして保存してください。

(function( $ ){

   $.fn.placeHolder = function() {  
      var input = this;
      var text = input.attr('placeholder');  // make sure you have your placeholder attributes completed for each input field
      if (text) input.val(text).css({ color:'grey' });
      input.focus(function(){  
         if (input.val() === text) input.css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){     
            input.val("").css({ color:'black' });  
         });
      });
      input.blur(function(){ 
         if (input.val() == "" || input.val() === text) input.val(text).css({ color:'grey' }); 
      }); 
      input.keyup(function(){ 
        if (input.val() == "") input.val(text).css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){
            input.val("").css({ color:'black' });
        });               
      });
      input.mouseup(function(){
        if (input.val() === text) input.selectRange(0,0); 
      });   
   };

   $.fn.selectRange = function(start, end) {
      return this.each(function() {
        if (this.setSelectionRange) { this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true); 
            range.moveEnd('character', end); 
            range.moveStart('character', start); 
            range.select(); 
        }
      });
   };

})( jQuery );

1つの入力のみで使用するには

$('#myinput').placeHolder();  // just one

これは、ブラウザーがHTML5プレースホルダー属性をサポートしていない場合に、サイトのすべての入力フィールドに実装することをお勧めします。

var placeholder = 'placeholder' in document.createElement('input');  
if (!placeholder) {      
  $.getScript("../js/placeholder.js", function() {   
      $(":input").each(function(){   // this will work for all input fields
        $(this).placeHolder();
      });
  });
} 

上記のフィドル/デモを作成していただけませんか。私と将来の視聴者にも役立ちます。
user2086641 2013

パスワードフィールドをサポートしていますか?
user2681579 2013年

6

IEでいくつかの提案を試し、問題を確認した後、これが機能するものです。

https://github.com/parndt/jquery-html5-placeholder-shim/

私が気に入ったこと-jsファイルを含めるだけです。それを開始する必要はありません。


このプレースホルダーを使用した後、つまり、フォームにエラーがある場合、フォームエラーを表示しているときに、プレースホルダーのテキストが入力フィールドからずれてしまいます。解決しようとしましたが、できませんでした。解決方法を教えてください。 。
user2681579 2013年

私はこれを値修正バージョンよりも本当に気に入っています。プレースホルダーのhtml5バージョンもこのように機能することを願っています!(つまり、フォーカスの値を失うのではなく、テキストが入力されるまでプレースホルダーを離れます)
Nathan Tregillus 14年

4
  • IE9 +でのみ機能します

次のソリューションは、placeholder属性を使用して入力テキスト要素にバインドします。IEのプレースホルダー動作をエミュレートし、変更されていない場合は送信時に入力の値フィールドをクリアします。

このスクリプトを追加すると、IEはHTML5プレースホルダーをサポートしているようです。

  $(function() {
  //Run this script only for IE
  if (navigator.appName === "Microsoft Internet Explorer") {
    $("input[type=text]").each(function() {
      var p;
     // Run this script only for input field with placeholder attribute
      if (p = $(this).attr('placeholder')) {
      // Input field's value attribute gets the placeholder value.
        $(this).val(p);
        $(this).css('color', 'gray');
        // On selecting the field, if value is the same as placeholder, it should become blank
        $(this).focus(function() {
          if (p === $(this).val()) {
            return $(this).val('');
          }
        });
         // On exiting field, if value is blank, it should be assigned the value of placeholder
        $(this).blur(function() {
          if ($(this).val() === '') {
            return $(this).val(p);
          }
        });
      }
    });
    $("input[type=password]").each(function() {
      var e_id, p;
      if (p = $(this).attr('placeholder')) {
        e_id = $(this).attr('id');
        // change input type so that the text is displayed
        document.getElementById(e_id).type = 'text';
        $(this).val(p);
        $(this).focus(function() {
          // change input type so that password is not displayed
          document.getElementById(e_id).type = 'password';
          if (p === $(this).val()) {
            return $(this).val('');
          }
        });
        $(this).blur(function() {
          if ($(this).val() === '') {
            document.getElementById(e_id).type = 'text';
            $(this).val(p);
          }
        });
      }
    });
    $('form').submit(function() {
      //Interrupt submission to blank out input fields with placeholder values
      $("input[type=text]").each(function() {
        if ($(this).val() === $(this).attr('placeholder')) {
          $(this).val('');
        }
      });
     $("input[type=password]").each(function() {
        if ($(this).val() === $(this).attr('placeholder')) {
           $(this).val('');
        }
      });
    });
  }
});

1
多くのユーザーがまだIE8を使用しており、一部のユーザーはIE7を使用しています。ですから、それがサポートされていなければ、私はこれに行きません
rzr

4

私はあなたに簡単な関数を提案します:

function bindInOut(element,value)
{
    element.focus(function()
    {
        if(element.val() == value) element.val('');         
    }).
    blur(function()
    {
        if(element.val() == '') element.val(value);
    });

    element.blur();
}

それを使用するには、次のように呼び出します。

bindInOut($('#input'),'Here your value :)');


2

使用できます:

var placeholder = 'search  here';

$('#search').focus(function(){
    if ($.trim($(this).val()) ===  placeholder){
        this.value ='';
    }
}).blur(function(){
    if ($.trim($(this).val()) ===  ''){
        this.value = placeholder;
    }
}).val(placeholder);

2

このように簡単です:

$(function() {
    ...

    var element = $("#selecter")
    if(element.val() === element.attr("placeholder"){

        element.text("").select().blur();
    }

    ...
});


1

私は、カスタムカラーを許可し、フォーカスされたときに入力をクリアするさまざまな動作を使用する簡単なプレースホルダーJQueryスクリプトを思い付きました。FirefoxとChromeのデフォルトのプレースホルダーを置き換え、IE8のサポートを追加します。

// placeholder script IE8, Chrome, Firefox
// usage: <input type="text" placeholder="some str" />
$(function () { 
    var textColor = '#777777'; //custom color

    $('[placeholder]').each(function() {
        (this).attr('tooltip', $(this).attr('placeholder')); //buffer

        if ($(this).val() === '' || $(this).val() === $(this).attr('placeholder')) {
            $(this).css('color', textColor).css('font-style','italic');
            $(this).val($(this).attr('placeholder')); //IE8 compatibility
        }

        $(this).attr('placeholder',''); //disable default behavior

        $(this).on('focus', function() {
            if ($(this).val() === $(this).attr('tooltip')) {
                $(this).val('');
            }
        });

        $(this).on('keydown', function() {
            $(this).css('font-style','normal').css('color','#000');
        });

        $(this).on('blur', function() {
            if ($(this).val()  === '') {
                $(this).val($(this).attr('tooltip')).css('color', textColor).css('font-style','italic');
            }
        });
    });
});

完璧な敬礼ですが、エラーがあります(this).attr( 'tooltip'、$(this).attr( 'placeholder')); //この行をバッファで$(this).attr( 'tooltip'、$(this).attr( 'placeholder'));に変更します //バッファ
angel.bonev 2016

0

プレースホルダーは、私が書いた超軽量のドロップインプレースホルダーjQueryポリフィルです。縮小されたサイズは1 KB未満です。

このライブラリがあなたの両方の懸念に対処することを確認しました:

  1. PlaceholdrはjQuery $ .fn.val()関数を拡張して、Placeholdrの結果として入力フィールドにテキストが存在する場合に予期しない戻り値を防止します。したがって、フィールドの値にアクセスするためにjQuery APIを使用する場合は、変更する必要はありません。

  2. Placeholdrはフォームの送信をリッスンし、サーバーが空の値を参照できるようにフィールドからプレースホルダーテキストを削除します。

ここでも、Placeholdrの目標は、プレースホルダーの問題に簡単なドロップインソリューションを提供することです。他にPlaceholdrのサポートに興味があれば、Githubでお知らせください。


0

プラグインを挿入し、IEが完全に機能していることを確認するにはjquery.placeholder.js

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="jquery.placeholder.js"></script>
    <script>
        // To test the @id toggling on password inputs in browsers that don’t support changing an input’s @type dynamically (e.g. Firefox 3.6 or IE), uncomment this:
        // $.fn.hide = function() { return this; }
        // Then uncomment the last rule in the <style> element (in the <head>).
        $(function() {
            // Invoke the plugin
            $('input, textarea').placeholder({customClass:'my-placeholder'});
            // That’s it, really.
            // Now display a message if the browser supports placeholder natively
            var html;
            if ($.fn.placeholder.input && $.fn.placeholder.textarea) {
                html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> and <code>textarea</code> elements.</strong> The plugin won’t run in this case, since it’s not needed. If you want to test the plugin, use an older browser ;)';
            } else if ($.fn.placeholder.input) {
                html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> elements, but not for <code>textarea</code> elements.</strong> The plugin will only do its thang on the <code>textarea</code>s.';
            }
            if (html) {
                $('<p class="note">' + html + '</p>').insertAfter('form');
            }
        });
    </script>

0

これは、IE 8以下のプレースホルダーを作成する純粋なjavascript関数(jqueryは不要)であり、パスワードに対しても機能します。HTML5プレースホルダー属性を読み取り、フォーム要素の背後にスパン要素を作成し、フォーム要素の背景を透明にします。

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


0

注:このポリフィルの作成者は、「想像できるほぼすべてのブラウザで機能する」と主張していますが、コメントによると、IE11には当てはまりませんが、IE11は、ほとんどの最新のブラウザと同様にネイティブサポートを備えています

Placeholders.jsは、私が見た中で最高のプレースホルダーポリフィルであり、軽量で、JQueryに依存せず、他の古いブラウザー(IEだけでなく)をカバーし、入力時に非表示および一度だけ実行するプレースホルダーのオプションがあります。


1
@Niclas IE9以降には、プレースホルダーに対する独自のネイティブサポートがあります。
Hexodus 2016

この回答に、プレースホルダー用のカヌースへのリンクを含むメモを追加しました。
Dave Everitt、2016年

-1

私はjquery.placeholderlabelsを使用します。これはこれに基づいておりここでデモできます

ie7、ie8、ie9で動作します。

この動作は、FirefoxとChromeの現在の動作を模倣しています。「プレースホルダー」テキストはフォーカス上に表示されたままであり、フィールドに何かが入力されると消えます。


-1

既存のシムがプレースホルダーのフォーカスに隠れてしまい、ユーザーエクスペリエンスが低下し、Firefox、Chrome、Safariがどのように処理するかと一致しないことに不満を感じた後、私は自分のjQueryプラグインを作成しました。これは、テキストが入力されるまでプレースホルダーを表示したまま、ページまたはポップアップが最初に読み込まれるときに入力にフォーカスを当てたい場合に特に当てはまります。

https://github.com/nspady/jquery-placeholder-labels/

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.