"value"フィールドが空の場合にプレースホルダ属性を追加する方法

Question

"value"プロパティを持つテキスト入力フィールドがある場合は、プレースホルダ属性（プレースホルダタグ、 "defaultvalue"および同様のアプローチではありません）空の？

私はここで多くの同様の質問を見ましたが、それらのほとんどはdefaultvalueを使用します。プレースホルダータグが必要ですが、HTML出力にはまったく影響しません。

これで指定したHTML出力例：

<input type="text" value="" name="textbox" id="edit-textbox"> 

Answer 1

私は、次の方法のいずれかをお勧めしたいためです。

JS Fiddle demo using el.placeholder = $('label[for=' + el.id + ']').text()。

それとも、さまざまなプレースホルダを保存するために、配列を使用することができます。

var placeholders = ['Email address', 'favourite color']; 

$('input:text').each(
    function(i,el) { 
     if (!el.value || el.value == '') { 
      el.placeholder = placeholders[i]; 
     } 
    });​ 

JS Fiddle demoを。

var placeholders = { 
    'one' : 'Email address', 
    'two' : 'Favourite color' 
}; 

$('input:text').each(
    function(i,el) { 
     if (!el.value || el.value == '') { 
      el.placeholder = placeholders[el.id]; 
     } 
    });​ 

JS Fiddle demo：特定の要素の特定のプレースホルダを指定する

。

追加したエントリは、プレースホルダに存在しないことをイベントでキャッチ/フォールバック

は、特定の inputのオブジェクト：

var placeholders = { 
    'oe' : 'Email address', // <-- deliberate typo over there 
    'two' : 'Favourite color' 
}; 

$('input:text').each(
    function(i,el) { 
     if (!el.value || el.value == '') { 
      el.placeholder = placeholders[el.id] || ''; 
     } 
    });​ 

JS Fiddle demo。

Answer 2

あなたはHTML5を使っている（とあなたがすべき）ネイティブplaceholder属性がある場合。

<input type="text" value="" placeholder="My placeholder!" name="textbox" id="edit-textbox"> 

編集

あなたがHTMLを編集して、JSを使用することはできません言ったように、これは役立つかもしれません。

$（ '＃edit-textbox'）。attr（ 'プレースホルダ'、 '私のプレースホルダ！'）;

$('input:text').each(
    function(i,el) { 
     if (!el.value || el.value == '') { 
      el.placeholder = 'placeholdertext'; 
      /* or: 
      el.placeholder = $('label[for=' + el.id + ']').text(); 
      */ 
     } 
    }); 

JS Fiddle demo using el.placeholder = 'placeholdertext'：

はもう一度、これはHTML 5

Answer 3

(function($) { 

    $('#edit-textbox').attr('placeholder','Your placeholder text'); 

})(jQuery);