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

Question

我有两个数组，一个包含输入名称，另一个包含为每个输入提供的值。有 7 个输入，因此我创建了一个循环来填充每个输入的值，然后进行设置，以便当该输入获得焦点时文本将消失，如果未输入任何内容，则恢复原始值文本。这可以通过 jQuery 循环来完成吗？在我看来 .live 和 .bind 不适用于此目的。我是否必须在每个输入事件焦点和模糊事件中进行硬核？

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('');
        });
});