0

我正在尝试一次为多个输入设置默认值，在焦点上删除该值并在输入为空时再次将其设置为模糊。为此，使用 jQuery，我得到了以下代码：

var settings = {
    value: '',
    focusColor: 'black',
    blurColor: '#CCC',
    value : 'test'
};

$.each($('input'), function(index, el) {
    $(el).on('blur', function(ev) {
        $el = $(this);
        console.log('blur ' + $el.attr('value') + ' ' + $el.attr('id'));
        if ($el.attr('value') == '') 
            $el.attr('value', settings.value).css('color', settings.blurColor);
    }).on('focus', function(ev) {
        console.log('focus ' + $el.attr('value') + ' ' + $el.attr('id'));
        if ($el.attr('value') == settings.value) 
            $(this).attr('value', '').css('color', settings.focusColor);
    });
    $(el).trigger('blur');
});

有这个 HTML：

<input id="text" type="text" />
<input id="email" type="email" />

问题是，如果我关注第一个输入，然后紧接着第二个，触发的事件是：关注第一个输入，模糊第一个输入并再次关注第一个输入。因此，如果我在第一个中输入一些内容，然后再次关注第二个和第一个，它不会删除示例文本，而是会删除我输入的内容。

您可以在此处查看（不）工作示例。打开 JavaScript 控制台，您会清楚地看到错误行为。​</p>

4

2 回答 2

1

你的意思是这样的：

$('input').on('blur', function(ev) {
    $el = $(this);
    console.log('blur ' + $el.va() + ' ' + $el.attr('id'));
    if ($el.val() == '')
        $el.attr('value', settings.value).css('color', settings.blurColor);
})

$('input').on('focus', function(ev) {
    $el = $(this);
    console.log('focus ' + $el.val() + ' ' + $el.attr('id'));
    if ($el.val() == settings.value) {
        $(this).val("");
        $(this).css('color', settings.focusColor);
    }
});

演示：http: //jsfiddle.net/fnBeZ/4/

于 2012-07-08T11:40:59.643 回答
1

您忘记了焦点事件中的 set $el 。

$.each($('input'), function(index, el) {
$(el).on('blur', function(ev) {
    $el = $(this);
    console.log('blur ' + $el.attr('value') + ' ' + $el.attr('id'));
    if ($el.attr('value') == '') 
        $el.attr('value', settings.value).css('color', settings.blurColor);
}).on('focus', function(ev) {
    $el = $(this); // <-- should update $el
    console.log('focus ' + $el.attr('value') + ' ' + $el.attr('id'));
    if ($el.attr('value') == settings.value) 
        $(this).attr('value', '').css('color', settings.focusColor);
});
$(el).trigger('blur');
});
于 2012-07-08T11:42:19.083 回答