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

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

1 个答案: