如果“value”字段为空,如何添加占位符属性

如果您有一个“value”属性为空的文本输入字段,是否有办法添加占位符属性(占位符标记,而不是“defaultvalue”和类似的方法)?

我在这里看到了很多类似的问题,但大多数都使用defaultvalue。 我需要占位符标签,另外我根本不能影响HTML输出。

这是给定的HTML输出示例:

 

我建议采用以下任何一种方法:

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

JS小提琴演示使用el.placeholder = 'placeholdertext'

JS小提琴演示使用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小提琴演示 。

要为特定元素指定特定占位符:

 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小提琴演示 。

如果特定input的占位符对象中不存在条目,则添加catch / fall-back:

 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小提琴演示 。

如果您正在使用HTML5(并且您应该),则会有一个本机占位符属性。

  

编辑

如你所说,你无法编辑HTML并且必须使用JS,这可能会有所帮助。

$(’#edit-textbox’)。attr(’placeholder’,’My placeholder!’);

再一次,这是针对HTML 5的。

 (function($) { $('#edit-textbox').attr('placeholder','Your placeholder text'); })(jQuery);