使用 jQuery 的 .live/.bind 来影响由 for 循环创建的输入

Question

我有两个数组，一个带有输入名称，一个带有每个输入的值。有 7 个输入，所以我做了一个循环来用它的值填充每个输入，然后让它在输入焦点时文本会消失，如果没有输入任何内容，则恢复原始值文本。这可以通过 jQuery 循环来实现吗？在我看来 .live 和 .bind 不适用于此目的。我是否必须在每个输入事件 focus&blur 事件中进行硬核？

for (var i=0;i<7;i++) {

    $('#user_' + input_names[i]).attr('value', default_values[i]);

    $('#user_' + input_names[i]).live("blur", function(){
        if(this.value == '')this.value=default_values[i];
    });

    $('#user_' + input_names[i]).live("focus", function(){
        if(this.value == default_values[i])this.value='';
    });

}

---

在此处更新，按照 Eric 的要求释放数组：

var input_names = ['username', 'password'];
var default_values = ['Username', 'Password'];

for (var i=0;i<2;i++) {    
    $('#user_' + input_names[i]).attr('value', default_values[i]);

    $('#user_' + input_names[i]).blur(function(){
        if(this.value == '')this.value=default_values[i];
    });

    $('#user_' + input_names[i]).focus(function(){
        if(this.value == default_values[i])this.value='';
    });
}

Answer 1

看起来您正在寻找 HTML5 placeholder 属性。只需将您的 HTML 更改为：

<input id="user_username" placeholder="Username" />
<input id="user_password" placeholder="Password" />

如果您想要向后兼容，there's a jQuery plugin for that。引用插件后，只需执行以下操作：

$('input[placeholder]').placeholder();

---

至于你的初始代码有什么问题，我怀疑存在闭包问题，i 保留了 7 的值。你最好改写成这样：

var inputDefaults = {username: 'Username', password: 'Password'};

$.each(inputDefaults, function(field, defaultValue) {
    $('#user_' + field)
        .attr('value', defaultValue);
        .blur(function() {
            if($(this).val() == '')
                $(this).val(defaultValue);
        })
        .focus(function(){
            if($(this).val() == defaultValue)
                $(this).val('');
        });
});