jquery - 入力ブラーとウィンドウブラー

Question

だから私はこのjsFiddle（http://jsfiddle.net/KDAM8/）を持っていて、入力がウィンドウのぼかしでその値を保持する方法を見つけようとしています。入力にフォーカスしてから alt+tab アウトするか、別の画面をクリックしてから戻ると、正しい値が保持されません。なぜこれが起こるのかを理解するのに苦労しているだけでなく、説明するのにも苦労しています. jsFiddle で私が求めていることを理解していただければ幸いです。

<input type="text" value="name" />
<input type="password" value="password" />​

$('input').each(function() {
    var itemVal;
    $(this).focus(function() {
        itemVal = $(this).val();
        $(this).val('');
    });
    $(this).blur(function() {
        $(this).val(itemVal);
    });
});​

Answer 1

gotuskar のアプローチの改善: 各フィールドの初期値を要素の にキャッシュ.dataすると、それを focus と blur の両方で既存の値と比較して、目的の効果を得ることができます。

$('input').each(function() {
    $(this).data('itemVal', $(this).val());

    $(this).focus(function() {
        if ($(this).val() === $(this).data('itemVal')) {
            $(this).val('');
        }
    });
    $(this).blur(function() {
        if (!$.trim($(this).val())) {
            $(this).val($(this).data('itemVal'));
        }
    });
});​

http://jsfiddle.net/mblase75/KDAM8/1/

Answer 2

行った変更をデバッグして理解しようとする -

$('input').each(function() {
    var itemVal;
    $(this).focus(function() {
        itemVal = $(this).val();
        if (itemVal === 'name' || itemVal === 'password') // added
          $(this).val('');
    });
    $(this).blur(function() {
        itemVal = $(this).val(); // added
        if (itemVal !== 'name' || itemVal === 'password') // added
            $(this).val(itemVal);
    });
});​