0

I have a list with a text input field $newItemField with the default value = "New Item". By clicking on an input button $addButton you can add the value of the $newItemField to the list.

When .focusin $newItemField I remove the default value to this.value = "";

When .focusout with $newItemdField = "" I reset the default value to $newItemField = "New Item". Both works just fine.

My question is, how can I combine the .focusout with a .focusin of a specific input field. In other words when .focusout wuth $newItemField = "" I only want to reset the default value when not clicked on $addButton????

What happens now is that when $newItemField ="" and I click $addButton the .focusout works first ($newItemField = "New Item") and then I add an item called "New Item" to the list. This is what I would like to prevent from happening.

I tried a lot using if and click(), but it didn't work. I would appreciate any form of support for my code below.

$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();
});

Here my changes after William's answer. Now the §newItemField does not show any value after focusing out irrespective the .activeElement. In other words no I am missing the default value "New Item" when not clicking on the add button.

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



});
Philly_de
  • 3
  • 2

1 Answers1

0

You can use setTimeout inside the focusout function to check if the button has the focus and only change the value if it doesn't.

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

});

Try this:

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

            }
        }, 100);


});
William Smith
  • 573
  • 1
  • 5
  • 11
  • Thanks William I get the idea of how it should work, but somehow I not getting it run. Please see my edited code in my question. What am I doing wrong? – Philly_de May 19 '14 at 19:49
  • Still, it is not working. I would appreciate, if you could have a look at my code. The focusout is in line 37: [MyJSFiddle](http://jsfiddle.net/Philly/3xfG7/5/) – Philly_de May 21 '14 at 20:07
  • Hi @Philly_de I amended the code above. If I copy and paste it into your JSFiddle it seems to work - I can add items to your list, when I click out of the newItem input the value 'New Item' appears and when I click into it the text clears. – William Smith May 21 '14 at 22:48