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" />

問題は、最初の入力に焦点を合わせ、2番目の入力の直後に焦点を合わせると、トリガーされるイベントは次のとおりです。最初の入力に焦点を合わせ、最初の入力にぼかしを入れ、最初の入力に再び焦点を合わせます。したがって、最初のテキストに何かを入力してから、2番目のテキストに焦点を合わせ、最初のテキストにもう一度フォーカスすると、サンプルテキストは削除されず、入力したテキストは削除されます。

ここで（機能していない）例を見ることができます。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

フォーカスイベント内のセット$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 に答える