jQuery .Blur () 및 .focus () 이벤트 문제

StackOverflow https://stackoverflow.com/questions/1429112

  •  07-07-2019
  •  | 
  •  

문제

입력 필드가 몇 개있는 양식이 있습니다. 사용자가 입력 필드를 클릭하면 해당 필드의 일부 선택과 함께 숨겨진 Div가 나타나면 옵션을 선택할 수 있으며이 세트는 필드 값으로 설정할 수 있습니다.

현재 DIV가 숨겨지는 방식은 사용자가 옵션을 선택할 때입니다. 이것은 제대로 작동하지만 사용자가 옵션을 선택하지 않으려면 DIV가 제거되지 않으면 어떻게해야합니까? 따라서 내 솔루션은 입력 필드에서 블러 이벤트를 사용하여 DIV 요소를 숨기는 것이 었습니다. 이렇게하면 사용자는 양식을 통해 탭하여 숨겨진 디브를보고 해당 필드를 떠날 때 숨길 수 있습니다. 이것은 올바르게 작동합니다.

문제는 이제 DIV에서 무언가를 클릭하여 입력에 채워지기를 원할 때 발생합니다. 블러조차도 추가했기 때문에 사용자가 DIV에서 옵션을 클릭하려고 할 때 화재가 발생하여 사용자가 클릭하기 전에 DIV를 약간 두 초에 효과적으로 숨기고 입력 필드에 아무것도 추가 할 수 없습니다.

이 문제를 해결하는 가장 좋은 방법은 무엇입니까? Blur 이벤트가 Div를 숨기려고 싶지만 사용자가 DIV 내부를 클릭하려면 어떤 종류의 예외가 필요합니다. 블러 이벤트가 클릭하려는 DIV를 숨기지 않을 것입니다.

도와 주셔서 감사합니다.

도움이 되었습니까?

해결책

블러 이벤트에서 타임 아웃을 설정하고 다른 입력 필드가 초점을 맞춘 경우에만 즉시 "도움말 DIV"를 숨길 수 있습니다.

이 같은:

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

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

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

// etc...

물론 이것을 더 일반적인 것으로 만들 수 있고 약간의 미세 조정을 사용할 수 있지만 아이디어를 얻을 수 있습니다 ...

다른 팁

Onblur, 해당에 숨기기 전에 2 초 동안 기다리는 타임 아웃을 설정하십시오. div. 그런 다음 클릭하고 타임 아웃을 지우십시오. 다음은 기본 예입니다 ...

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

그 필드 직후에 탭 정지와 함께 닫기 버튼을 추가합니다. 이것은 옵션을 선택하지 않고 대화를 무시할 수있는 방법이 있다는 것을 깨닫지 못할 수도있는 비밀 (탭)을 모르는 사용자의 문제를 해결할 수 있습니다.

사용자가 도우미 요소를 클릭 할 때 트리거하는 Mousedown 이벤트를 사용하십시오.

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

$('#helper').mousedown(function () {
  console.log('This executed before the blur event');
});
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top