Jquery聚焦不同的事件，这取决于你接下来关注的地方

Question

我有一个列表的文本输入字段$newItemField与默认值="新项目"。通过点击输入按钮$addButton，你可以将$newItemField的值添加到列表中。

当.focusin $newItemField时，我删除了默认值。

当.focusout with $newItemdField = "时，我将默认值重置为$newItemField = "New Item"。两者都很好。

我的问题是，我如何将。focusout与特定输入字段的。focusin结合起来。换句话说，当.focusout with $newItemField = "我只想重置默认值时，不点击$addButton????

现在发生的是，当$newItemField ="，我点击$addButton .focusout工作第一($newItemField ="新项目")，然后我添加一个名为"新项目"的项目列表。这就是我想要避免的事情。

我尝试了很多使用if和click()，但它没有工作。如果您对我的代码有任何形式的支持，我将不胜感激。

$newItemField.each(function() {
    $(this).data('default', this.value);
})
.focusin(function() {
    if (this.value == $(this).data('default')) {
        this.value = '';    
    }
})
.focusout(function() {
    if  (this.value === ""){            
        this.value = $(this).data('default');      
    }
});
$addButton.click(function() {
    addItem();
    $newItemField.select();
});

这是威廉回答后我的变化。现在，§newItemField在聚焦后不显示任何值，与。activeelement无关。换句话说，当不点击添加按钮时，我错过了默认值"新项目"。

$newItemField.each(function() {
    $(this).data('default', this.value);
})
.focusin(function() {
    if (this.value == $(this).data('default')) {
        this.value = '';    
    }
})
.focusout(function() {
    setTimeout(function () {

    if ($(document.activeElement).attr('id')!==$('add')//the id of the add button is #add
        {
        if ($newItemField.value === ""){
            this.value = $(this).data('default');
        }             
    }
}, 100);

});

Answer 1

你可以在focusout函数中使用setTimeout来检查按钮是否有焦点，只有当它没有焦点时才改变它的值。

.focusout(function() {
    setTimeout(function () {
        if ($(document.activeElement).attr('id')!='$addButton')
        {
             //run code
             //remember 'this' no longer refers to $newItemField
        }
    }, 100);
});

试试这个:

.focusout(function() {
        setTimeout(function () {
            if ($(document.activeElement).attr('id') != ('add')) {
                {
                $(newItem).val('New Item');
                }
            }
        }, 100);

});