如果「值」字段爲空，如何添加佔位符屬性

如果您的文本輸入字段具有「值」屬性，是否有添加佔位符屬性（佔位符標記，而不是「defaultvalue」和類似方法）的方法空？如果「值」字段爲空，如何添加佔位符屬性

我在這裏看到很多類似的問題，但其中大多數使用defaultvalue。我需要佔位符標籤，另外我根本不能影響HTML輸出。

這是給定的HTML輸出例子：

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

來源

2012-10-20 take2

http://jsfiddle.net/gT7dv/ –

@RPM這太簡單了，不是嗎？ :)我寫道，我不能影響HTML輸出。這是我有的代碼，我必須添加jQuery的placeholder屬性 – take2

它根本不影響HTML輸出（除了添加佔位符，這是你需要的，不是嗎？）！但請記住它是用於HTML 5的！ – Robyflc

我建議以下方法之一：

$('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'。

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。

添加一個catch /回退在一個條目中不存在佔位事件對象特定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。

來源

2012-10-20 22:10:38

我已經嘗試了這兩個建議，但它沒有奏效......你可以在這裏檢查小提琴：http://jsfiddle.net/U2YZx – take2

你需要在該代碼中使用一個實際的標籤元素。你沒有一個，所以這是行不通的。 –

輝煌，謝謝！雖然有一個關於這個代碼的問題 - 你如何引用哪個文本框應該受到影響，即我怎樣才能確切的輸入框（在這種情況下用#textbox）？ – take2

如果您使用HTML5（你應該）有一個本地佔位符屬性。

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

編輯

正如你說你不能編輯HTML和必須使用JS，這可能會有幫助。（'＃edit-textbox'）。attr（'placeholder'，'My placeholder！'）;

再次，這是HTML 5

來源

2012-10-20 22:10:15 Robyflc

這一個也適用，謝謝！大衛是第一個，所以我已經接受了他的答案。 – take2

好的！請注意，我們的答案是完全不同的，會導致不同的事情。您的問題是：「如何添加佔位符屬性」並設置值屬性（如在他的答案中）是絕對不一樣的。 – Robyflc

我用螢火蟲檢查了他的代碼，並且佔位符文本顯示爲佔位符屬性，所以這將是我的問題的答案。 – take2

(function($) { 

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

})(jQuery);

來源

2014-11-15 12:03:20

如果「值」字段爲空，如何添加佔位符屬性

回答

相關問題