JQuery фокусировать различные события в зависимости от того, где вы сосредоточены в следующем

Question

У меня есть список с полем ввода текста $newItemField со значением по умолчанию = "Новый элемент". Нажав на кнопку ввода $addButton, вы можете добавить значение $newItemField в список.

Когда.focusin $newItemField, я удаляю значение по умолчанию this.value = "";

Когда.focusout с $ newItemdField = "" я сбрасываю значение по умолчанию на $newItemField = "New Item". Оба работают просто отлично.

У меня вопрос, как я могу объединить.focusout с.focusin определенного поля ввода. Другими словами, когда.focusout wuth $newItemField = "" Я хочу сбросить значение по умолчанию только тогда, когда не нажата кнопка $addButton????

Что происходит сейчас, так это то, что когда $newItemField = "" и я нажимаю $addButton, сначала работает.focusout ($newItemField = "New Item"), а затем я добавляю элемент с именем "New Item" в список. Это то, что я хотел бы предотвратить.

Я много пробовал, используя 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

Вы можете использовать setTimeout внутри функции focusout, чтобы проверить, имеет ли кнопка фокус, и изменить значение, только если она не имеет.

.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);


});