输入模糊和窗口模糊答案

【问题标题】：Input blur and window blur输入模糊和窗口模糊
【发布时间】：2012-07-31 21:24:29
【问题描述】：

所以我有这个 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);
    });
});

【问题讨论】：

您还期望$(this).val(itemVal) 做什么？您的代码正在覆盖输入字段，因为这是您清楚明确地告诉它要做的事情。
对，但我的问题是如何保持输入的原始值？如果您在页面内进行模糊处理，这很好，但当您通过聚焦另一个页面进行模糊处理时则不行。

标签： jquery forms input focus blur

【解决方案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/

【讨论】：

完美。完全符合我的需要。谢谢！

【解决方案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);
    });
});

【讨论】：

在name 字段上可以正常工作，而在password 字段上完全失败。
同意，只是为了让他理解一个方面，让他理解并为password编码
现在password 也是如此。
不幸的是，我希望它更通用一点，因为它不仅仅适用于这两个领域。不过谢谢！
肯定@Blazemonger 的答案更优雅。这是解决方案之一。