jquery focusout 다음 포커스 위치에 따라 다른 이벤트가 발생했습니다

Question

텍스트 입력 필드 $ newItemField에 기본값 "New Item"이있는 목록이 있습니다. 입력 버튼 $ addButton을 클릭하면 $ newItemField의 값을 목록에 추가 할 수 있습니다.

.focusin $ newItemField를 지정하면 this.value = ""로 기본값이 제거됩니다.

$ newItemdField = "".focusout을 사용하면 기본값을 $ newItemField = "New Item"으로 재설정했습니다. 둘 다 잘 작동합니다.

제 질문은 .focusout을 특정 입력 필드의 .focusin과 어떻게 조합 할 수 있습니까? 다른 말로하면 .focusout wuth $ newItemField = ""$ addButton을 클릭하지 않은 경우에만 기본값을 재설정하고 싶습니까?

$ newItemField = ""를 선택하고 $ addButton을 클릭하면 .focusout이 먼저 작동하고 ($ newItemField = "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

당신은 버튼에 포커스가 있는지 확인하고 그렇지 않은 경우에만 값을 변경합니다 대한 focusOut 함수 내에서는 setTimeout 사용할 수 있습니다.

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

      } 
     }, 100); 


});