javascript - 如果“值”字段为空，如何添加占位符属性

Question

如果您有一个“value”属性为空的文本输入字段，有没有办法添加占位符属性（占位符标记，而不是“defaultvalue”和类似方法）？

我在这里看到了很多类似的问题，但大多数都使用默认值。我需要占位符标签，另外我根本无法影响 HTML 输出。

这是给定的 HTML 输出示例：

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

Answer 1

我建议以下任何一种方法：

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

JS Fiddle 演示使用el.placeholder = 'placeholdertext'.

JS Fiddle 演示使用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：

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

Answer 2

如果您使用的是 HTML5（并且应该），则有一个原生占位符属性。

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

编辑

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

$('#edit-textbox').attr('placeholder', '我的占位符！');

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

Answer 3

(function($) {

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

})(jQuery);