'blur' 이벤트가 발생할 때 어떤 요소의 포커스가 *to*로 갔는지 어떻게 알 수 있습니까?

'blur' 이벤트가 발생할 때 어떤 요소의 포커스가 *to*로 갔는지 어떻게 알 수 있습니까?

, 제가 '부르다'를 붙이면요.blurHTML html html html html 。

<input id="myInput" onblur="function() { ... }"></input>

" " " " " " " " " " " " " " " " " " " " " " " " " 를 수 방법이 ?blur벤트클클 클생??? ★★★★★★★★★★★★★★★★★★?

예를 들어 다음과 같은 스팬이 있다고 가정합니다.

<span id="mySpan">Hello World</span>

입력 요소가 포커스를 잡은 직후에 스팬을 클릭하면 입력 요소가 포커스를 잃습니다.는 어떻게 이 ""을 알 수?mySpan릭이이되?되 었??

PS: 입력 요소의 온블러 이벤트 전에 스팬의 클릭 이벤트가 발생하면 특정 요소가 클릭되었음을 나타내는 상태 값을 설정할 수 있기 때문에 문제가 해결됩니다.

이에서 (클릭 보완 싶은 입니다.PPS에 이 즉시 .이 때문에 제안 내용이 즉시 사라지지 않습니다.blur이벤트가 표시됩니다. 저는 ''을 요.blur1개의 특정 요소가 클릭되어 있는 경우는 기능합니다.클릭되어 있는 경우는, 흐림 이벤트를 무시합니다.

2015년 답변: UI 이벤트에 따르면 이벤트 속성을 사용할 수 있습니다.

이벤트 유형에 따라 Focus 이벤트와 관련된 세컨더리를 식별하는 데 사용됩니다.

이벤트의 경우,

: 이벤트 대상이 포커스를 수신합니다relatedTarget.

예제:

function blurListener(event) {
  event.target.className = 'blurred';
  if(event.relatedTarget)
    event.relatedTarget.className = 'focused';
}
[].forEach.call(document.querySelectorAll('input'), function(el) {
  el.addEventListener('blur', blurListener, false);
});

.blurred { background: orange }
.focused { background: lime }

<p>Blurred elements will become orange.</p>
<p>Focused elements should become lime.</p>
<input /><input /><input />

는 Firefox를 지원하지 relatedTarget버전 48까지(버그 962251, MDN).

파이어폭스에서는explicitOriginalTarget이치노★★★★★★를 기대했다.toElementIE에 대해서도 같은 처리를 합니다만, 동작하지 않는 것 같습니다. 이 을 맞춘 수 .

function showBlur(ev)
{
   var target = ev.explicitOriginalTarget||document.activeElement;
   document.getElementById("focused").value = 
      target ? target.id||target.tagName||target : '';
}

...

<button id="btn1" onblur="showBlur(event)">Button 1</button>
<button id="btn2" onblur="showBlur(event)">Button 2</button>
<button id="btn3" onblur="showBlur(event)">Button 3</button>
<input id="focused" type="text" disabled="disabled" />

---

주의: 이 기술은 키보드로 필드를 탭하여 포커스를 변경하는 경우에는 작동하지 않으며 Chrome 또는 Safari에서는 전혀 작동하지 않습니다.사용의 큰 문제activeElement(IE에서는 제외)는, 그 후가 될 때까지, 일관되게 갱신되지 않는 것.blur이벤트가 처리되었으며 처리 중에 유효한 값이 전혀 없을 수 있습니다!이는 Michiel이 사용하게 된 기술에 대한 변형으로 완화될 수 있습니다.

function showBlur(ev)
{
  // Use timeout to delay examination of activeElement until after blur/focus 
  // events have been processed.
  setTimeout(function()
  {
    var target = document.activeElement;
    document.getElementById("focused").value = 
      target ? target.id||target.tagName||target : '';
  }, 1);
}

이는 대부분의 최신 브라우저(Chrome, IE 및 Firefox에서 테스트됨)에서 작동하지만 Chrome이 클릭되는 버튼에 초점을 설정하지 않는다는 경고(탭이 아닌)가 있습니다.

(StackOverflow가 아닌 친구의 조언 덕분에) 최종적으로 온블러 이벤트의 타임아웃으로 해결했습니다.

<input id="myInput" onblur="setTimeout(function() {alert(clickSrc);},200);"></input>
<span onclick="clickSrc='mySpan';" id="mySpan">Hello World</span>

FF와 IE 모두에서 동작합니다.

흐림 대신 문서의 분쇄 이벤트를 사용할 수 있습니다.

$(document).mousedown(function(){
  if ($(event.target).attr("id") == "mySpan") {
    // some process
  }
});

유형의 인스턴스FocusEvent가지고 있다relatedTarget단, FF 버전47까지의 속성, 구체적으로는 이 Atribute를 반환합니다.null48부터 이미 동작하고 있습니다.

여기서 더 많이 볼 수 있어요.

Google Chrome v66.x, Mozilla v59.x 및 Microsoft Edge에서 작동...jQuery를 사용한 솔루션.

Internet Explorer 9에서 테스트하지만 지원되지 않습니다.

$("#YourElement").blur(function(e){
     var InputTarget =  $(e.relatedTarget).attr("id"); // GET ID Element
     console.log(InputTarget);
     if(target == "YourId") { // If you want validate or make a action to specfic element
          ... // your code
     }
});

다른 Internet Explorer 버전에서 테스트 코멘트를 입력합니다.

또한 특정 요소가 클릭되면 자동 컴플레이터가 흐림을 무시하고 솔루션이 작동하지만 explicit Original Target으로 인해 Firefox에만 해당됩니다.

Autocompleter.Base.prototype.onBlur = Autocompleter.Base.prototype.onBlur.wrap( 
        function(origfunc, ev) {
            if ($(this.options.ignoreBlurEventElement)) {
                var newTargetElement = (ev.explicitOriginalTarget.nodeType == 3 ? ev.explicitOriginalTarget.parentNode : ev.explicitOriginalTarget);
                if (!newTargetElement.descendantOf($(this.options.ignoreBlurEventElement))) {
                    return origfunc(ev);
                }
            }
        }
    );

이 코드는 Autocompler의 default onBlur 메서드를 랩하여 ignoreBlurEventElement 파라미터가 설정되어 있는지 확인합니다.설정되어 있는 경우 클릭된 요소가 ignoreBlurEventElement인지 여부를 매번 확인합니다.이 경우 Autocompleter는 OnBlur를 계산하지 않고 그렇지 않으면 OnBlur를 호출합니다.유일한 문제는 explicit Original Target 속성이 Mozilla 고유하기 때문에 Firefox에서만 작동한다는 것입니다.이제 explicit Original Target을 사용하는 것과는 다른 방법을 찾으려고 합니다.말씀하신 솔루션에서는 온클릭 동작을 수동으로 요소에 추가해야 합니다.explicit Original Target 문제를 해결할 수 없다면 귀사의 솔루션을 따르겠습니다.

확인 내용과 시간을 되돌릴 수 있습니까?마지막으로 흐려진 부분을 기억하는 경우:

<input id="myInput" onblur="lastBlurred=this;"></input>

다음으로 span의 onClick에서 양쪽 오브젝트를 사용하여 function()을 호출합니다.

<span id="mySpan" onClick="function(lastBlurred, this);">Hello World</span>

그러면 함수가 Ajax를 트리거할지 여부를 결정할 수 있습니다.Auto Completer 컨트롤.함수에는 클릭된 개체와 흐릿한 개체가 있습니다.OnBlur는 이미 발생했기 때문에 제안이 사라지지 않습니다.

다음과 같은 것을 사용합니다.

var myVar = null;

다음으로 기능 내부를 나타냅니다.

myVar = fldID;

그 후:

setTimeout(setFocus,1000)

그 후:

function setFocus(){ document.getElementById(fldID).focus(); }

최종 코드:

<html>
<head>
    <script type="text/javascript">
        function somefunction(){
            var myVar = null;

            myVar = document.getElementById('myInput');

            if(myVar.value=='')
                setTimeout(setFocusOnJobTitle,1000);
            else
                myVar.value='Success';
        }
        function setFocusOnJobTitle(){
            document.getElementById('myInput').focus();
        }
    </script>
</head>
<body>
<label id="jobTitleId" for="myInput">Job Title</label>
<input id="myInput" onblur="somefunction();"></input>
</body>
</html>

불가능하다고 생각합니다. IE를 사용하면window.event.toElement파이어폭스에서는 동작하지 않습니다.

IE는 다음과 같이 수정할 수 있습니다.

 event.currentTarget.firstChild.ownerDocument.activeElement

FF의 'explicit Original Target' 같아요

앙투안과 J

이 답변에서 설명한 바와 같이 다음 값을 확인할 수 있습니다.document.activeElementdocument핸들러에서 을 쓸 onBlur 핸들러에서 사용할 수 있습니다.

function myOnBlur(e) {
  if(document.activeElement ===
       document.getElementById('elementToCheckForFocus')) {
    // Focus went where we expected!
    // ...
  }
}

• document.activeElement는 부모 노드(예를 들어 타깃에서 다른 노드로 전환되는 임시 단계이기 때문에 본문 노드)일 수 있으므로 스코프에서는 사용할 수 없습니다.
• ev.explicit Original Target이 항상 평가되는 것은 아닙니다.

따라서 가장 좋은 방법은 온클릭 바디이벤트를 사용하여 노드(event.target)가 흐릿하게 되어 있음을 간접적으로 이해하는 것입니다.

편집: 중요한 모든 요소에 대해 초점을 추적하는 변수를 만드는 것이 가장 쉬운 방법입니다.따라서 'myInput'이 포커스를 잃었다는 점에 관심이 있다면 포커스에 변수를 설정하십시오.

<script type="text/javascript">
   var lastFocusedElement;
</script>
<input id="myInput" onFocus="lastFocusedElement=this;" />

원답:'this'를 함수에 전달할 수 있습니다.

<input id="myInput" onblur="function(this){
   var theId = this.id; // will be 'myInput'
}" />

글로벌 변수를 blorfrom과 blorto로 사용하는 것이 좋습니다.다음으로 DOM 내의 위치를 할당하는 모든 요소를 포커스를 잃었을 때의 변수 흐림으로부터 설정합니다.또, 포커스를 취득하면 변수가 DOM 로의 위치에 흐려지도록 설정합니다.그런 다음 다른 함수를 사용하여 흐릿한 데이터와 흐릿한 데이터를 분석할 수 있습니다.

explicit Original Target을 사용하는 솔루션은 텍스트 입력에서 텍스트 입력으로 점프할 때 작동하지 않습니다.

버튼을 다음과 같은 텍스트 기호로 바꾸면 그 차이가 나타납니다.

<input id="btn1" onblur="showBlur(event)" value="text1">
<input id="btn2" onblur="showBlur(event)" value="text2">
<input id="btn3" onblur="showBlur(event)" value="text3">

이 기능을 사용해 본 결과, FF, IE, Chrome, Opera가 이벤트의 소스 요소를 제공할 수 있는 기능을 가지고 있는 것을 알 수 있었습니다.Safari를 테스트해 본 적은 없지만, 비슷한 것이 있을지도 모른다고 생각합니다.

$('#Form').keyup(function (e) {
    var ctrl = null;
    if (e.originalEvent.explicitOriginalTarget) { // FF
        ctrl = e.originalEvent.explicitOriginalTarget;
    }
    else if (e.originalEvent.srcElement) { // IE, Chrome and Opera
        ctrl = e.originalEvent.srcElement;
    }
    //...
});

Javascript를 코딩할 때 타임아웃을 사용하는 것을 좋아하지 않기 때문에 Michiel Borkent와는 반대로 하겠습니다.(뒤에서 코드를 시도하지 않았지만 아이디어를 얻어야 합니다.)

<input id="myInput" onblur="blured = this.id;"></input>
<span onfocus = "sortOfCallback(this.id)" id="mySpan">Hello World</span>

머릿속은 그런 느낌이야

<head>
    <script type="text/javascript">
        function sortOfCallback(id){
            bluredElement = document.getElementById(blured);
            // Do whatever you want on the blured element with the id of the focus element


        }

    </script>
</head>

저는 어떤 요소든 초점을 맞추고 "확장할 수 있는" 것으로 만드는 대체 솔루션을 썼습니다.

그 원소를 만드는 것에 기반을 두고 있다.contentEditable시각적으로 숨기고 편집 모드 자체를 비활성화합니다.

el.addEventListener("keydown", function(e) {
  e.preventDefault();
  e.stopPropagation();
});

el.addEventListener("blur", cbBlur);
el.contentEditable = true;

데모

주의: Chrome, Firefox 및 Safari(OS X)에서 테스트 완료.IE에 대해서는 잘 모르겠습니다.

---

연관된:저는 VueJs의 솔루션을 찾고 있었습니다.Vue Focusable 디렉티브를 사용하여 이러한 기능을 구현하는 방법에 관심이 있거나 궁금한 분은 확인해 주십시오.

해답에는 해킹밖에 없습니다만, 실제로 매우 사용하기 쉬운 솔루션이 짜넣어져 있습니다.기본적으로 다음과 같이 포커스 요소를 캡처할 수 있습니다.

const focusedElement = document.activeElement

https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement

이쪽:

<script type="text/javascript">
    function yourFunction(element) {
        alert(element);
    }
</script>
<input id="myinput" onblur="yourFunction(this)">

또는 JavaScript(이 예에서는 jQuery)를 사용하여 리스너를 접속하는 경우:

var input = $('#myinput').blur(function() {
    alert(this);
});

편집: 죄송합니다.질문을 잘못 읽었어요.

"this"에서 온블러 이벤트의 원인이 되는 필드의 참조를 전달하면 jquery를 통해 쉽게 할 수 있다고 생각합니다.
★★★★★★★★★★★★★★★★★,

<input type="text" id="text1" onblur="showMessageOnOnblur(this)">

function showMessageOnOnblur(field){
    alert($(field).attr("id"));
}

합니다.

다음과 같이 만들 수 있습니다.

<script type="text/javascript">
function myFunction(thisElement) 
{
    document.getElementByName(thisElement)[0];
}
</script>
<input type="text" name="txtInput1" onBlur="myFunction(this.name)"/>

언급URL : https://stackoverflow.com/questions/121499/when-a-blur-event-occurs-how-can-i-find-out-which-element-focus-went-to