jQuery .blur() 및 .focus() 이벤트 관련 문제

Question

몇 가지 입력 필드가있는 양식이 있습니다. 사용자가 입력 필드를 클릭하면 해당 필드에 대한 일부 선택 항목과 함께 숨겨진 div가 나타나고 옵션을 선택할 수 있으며이 값을 필드 값으로 설정할 수 있습니다.

현재 div가 숨겨진 방식은 사용자가 옵션을 선택할 때입니다. 이것은 잘 작동하지만 사용자가 옵션을 선택하지 않으려는 경우 div가 제거되지 않습니다. 그래서, 내 솔루션은 div 요소를 숨길 수있는 입력 필드에 blur 이벤트를 사용하는 것이 었습니다. 그렇게하면 사용자가 양식을 탭하고 숨겨진 div를보고 필드를 떠날 때 숨길 수 있습니다. 이것은 올바르게 작동합니다.

문제는 입력에서 채우기 위해 div에서 뭔가를 클릭하고 싶을 때 발생합니다. 나는 심지어 블러를 추가했기 때문에 사용자가 div에서 옵션을 클릭하려고 할 때 발생합니다. 사용자가 클릭하기 전에 div를 잠시 숨기므로 입력 필드에 아무 것도 추가하지 않습니다.

이 문제를 해결하는 가장 좋은 방법은 무엇입니까? div를 숨기기 위해 blur 이벤트를 사용하고 싶습니다. 그러나 사용자가 div 내부를 클릭하려고 할 때 예외가 있어야하며, blur 이벤트는 클릭하려고하는 div를 숨기지 않습니다.

도움 주셔서 감사합니다.

Answer 1

블러 이벤트에 타임 아웃을 설정하고 다른 입력 필드에 포커스가있을 때만 "help div"를 즉시 숨길 수 있습니다. 이 같은

뭔가 : 당신은 물론이 더 일반적인 만들 수 있으며 일부 미세 조정을 사용할 수 있습니다,하지만 당신은 아이디어를 얻을

$("#input1").focus(function() { 
     hideAllHelpers(); $("#helper1").show(); 
}); 

$("#input1").blur(function() { 
     window.setTimeout(function() { $("#helper1").hide(); },2000); }); 
}); 

$("#input2").focus(function() { 
     hideAllHelpers(); $("#helper2").show(); 
}); 

// etc... 

...

Answer 2

및 onblur는 시간 제한을 설정하는 것이 잠시 대기하여 해당 div을 숨 깁니다. 그런 다음 onclick, 시간 제한을 지우십시오. 여기에 기본 예가 있습니다 ...

// Namespace for timer 
var myPage = { 
    timer: null 
} 

// Blur event for textbox 
.blur(function() { 
    myPage.timer = setTimeout(function() { 
    // Hide the div 
    }, 1000); 
}); 

// Click event for DIV 
.click(function() { 
    clearTimeout(myPage.timer); 
    // Fill in the textbox 
    $(this).hide(); 
}); 

Answer 3

나는 그 필드 바로 다음에 탭 중지와 함께 닫기 버튼을 추가했습니다. 이렇게하면 옵션을 선택하지 않고 대화 상자를 닫을 수있는 방법이 없다는 사실을 알지 못하는 비밀을 알지 못하는 사용자의 문제를 해결할 수 있습니다.

Answer 4

사용자가 도우미 요소를 클릭했지만 input 요소에서 blur 이벤트가 트리거되기 전에 트리거되는 mousedown 이벤트를 사용합니다.

$('#input').blur(function() { 
    $('#helper').hide(); 
}); 

$('#helper').mousedown(function() { 
    console.log('This executed before the blur event'); 
});