을 때는'블'이벤트가 발생하는지 어떻게 알 수 있습니하는 요소에 초점을**?

Question

나는 첨부 blur 기능 HTML 입력란에 다음과 같다:

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

이 있을 얻을 수 있는 방법 요소의 ID 원 blur 이벤트하는 화재(요소는 클릭)내에 기능입니까?방법?

예를 들어 나는 범위 다음과 같다:

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

클릭 하는 경우 스팬 후 바로 입력이 요소에 초점,입력된 요소를 잃게됩니다.어떻게 가능했던 것을 알 mySpan 클릭된?

PS:는 경우 onclick 이벤트의 범위가 발생하기 전에 onblur 이벤트의 요소를 입력 내 문제가 해결 될 것이기 때문에,내가 설정할 수 있 일부 상태 값을 나타내는 특정 요소가 있었습니다.

PPS:의 배경은 이 문제는 나를 실행하고 싶을 AJAX autocompleter 제어부(에서 클릭할 수 있는 요소)하 제안이 없이 제안을 사라지기 때문에 즉시의 blur 이벤트 입력에 대한 요소입니다.그래서 확인하고 싶어에 blur 기능는 경우 특정 요소의 클릭 되었고,그렇다면,무 흐림의 이벤트입니다.

Answer 1

흠 ... Firefox에서는 사용할 수 있습니다 explicitOriginalTarget 클릭 한 요소를 당기려면 기대했다 toElement IE에 대해서도 똑같이 수행하려면 작동하지 않는 것 같습니다 ... 그러나 새로 초점을 맞춘 요소를 문서에서 가져올 수 있습니다.

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" />

---

경고: 이 기술은 그렇습니다 ~ 아니다 초점 변화에 의한 작업 탭 키보드가있는 필드를 통해 크롬 또는 사파리에서는 전혀 작동하지 않습니다. 사용의 큰 문제 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은 버튼에 초점을 맞추지 않는 경고가 있습니다. 클릭 (vs. 탭).

Answer 2

2015 답변: 에 따르면 UI 이벤트, 당신은 그것을 사용할 수 있습니다 relatedTarget 이벤트의 속성 :

보조를 식별하는 데 사용됩니다 EventTarget 이벤트 유형에 따라 초점 이벤트와 관련이 있습니다.

을 위한 blur 이벤트,

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).

Answer 3

나는 그것을 해결 결과에 대해 시간 제한 onblur 이벤트(조언 덕분에 친구가하지 유래):

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

두에서 작동하 FF 및 IE.

Answer 4

Blur 대신 Mousedown 문서를 사용할 수 있습니다.

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

Answer 5

유형 FocusEvent 인스턴스가 있습니다 relatedTarget 그러나 속성은 FF의 버전 47, 특히이 속성이 이미 작동하는 48에서 NULL을 반환합니다.

더 많이 볼 수 있습니다 여기.

Answer 6

또한 특정 요소가 클릭하고 작동하는 솔루션이 있으면 AutoComperter가 흐려지는 것을 무시하려고 노력하지만 explicitoriginalTarget으로 인해 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);
                }
            }
        }
    );

이 코드는 자동 완성기의 기본 OnBlur 메소드를 래핑하고 ingoreBlureventElement 매개 변수가 설정되어 있는지 확인합니다. 설정된 경우 매번 클릭 한 요소가 무시되는지 여부를 확인하기 위해 매번 확인합니다. 만약 그렇다면, AutoComperter는 onblur가 아니며 그렇지 않으면 onblur를 호출합니다. 이것의 유일한 문제는 explicitoriginalTarget 속성이 Mozilla 특이 적이기 때문에 Firefox에서만 작동한다는 것입니다. 이제 나는 explicitoriginalTarget을 사용하는 것과 다른 방법을 찾으려고 노력하고 있습니다. 당신이 언급 한 솔루션은 요소에 수동으로 OnClick 동작을 추가해야합니다. explicitoriginalTarget 문제를 해결할 수 없다면 솔루션을 따라갈 것 같습니다.

Answer 7

당신이 확인하고있는 것을 뒤집을 수 있습니까? 그것은 당신이 마지막으로 흐려진 것을 기억한다면 :

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

그런 다음 스팬을 클릭 한 상태에서 두 객체를 사용하여 Call function ()을 호출하십시오.

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

그런 다음 기능을 사용하면 AJAX.AUTOMEMPLER 컨트롤을 트리거할지 여부를 결정할 수 있습니다. 함수에는 클릭 된 객체가 있습니다 그리고 흐릿한 대상. Onblur는 이미 일어 났으므로 제안이 사라지지 않을 것입니다.

Answer 8

다음과 같은 것을 사용하십시오.

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>

Answer 9

나는 그것이 가능하지 않다고 생각합니다. 즉, 당신은 사용할 수 있습니다. window.event.toElement, 그러나 그것은 Firefox와 함께 작동하지 않습니다!

Answer 10

언급 한 바와 같이 이 답변, 당신은 값을 확인할 수 있습니다 document.activeElement. document 글로벌 변수이므로 Onblur 핸들러에서 사용하기 위해 마법을 할 필요가 없습니다.

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

Answer 11

• Document.ActiveElement는 상위 노드가 될 수 있습니다 (예 : 대상에서 다른 대상으로 전환하는 임시 위상에 있기 때문에 차체 노드). 스코프에 대해서는 사용할 수 없습니다.
• Ev.ExplicitorIgInalTarget이 항상 가치가있는 것은 아닙니다

가장 좋은 방법은 간접적으로 이해하기 위해 Body Event를 클릭하는 것입니다 (Event.Target)는 Blur에 있습니다.

Answer 12

편집하다:해킹하는 방법은 관심있는 모든 요소에 대한 초점을 추적하는 변수를 만드는 것입니다. 따라서 'MyInput'을 잃어버린 초점을 맞추는 데 관심이 있다면 초점에 변수를 설정하십시오.

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

원본 답변 : '이것'을 함수로 전달할 수 있습니다.

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

Answer 13

내가 사용하는 것이 좋 글로벌 변수 blurfrom 및 blurto.그 후,모든 구성 요소를 관리 할당하는 자신의 위치에서 DOM 변수 blurfrom 때 그들은 초점을 잃는다.또한,구성하도록 초점을 얻을 설정 변수 blurto 하기 그 위치에서 이용하실 수 있습니다.다음을 사용할 수 있습니다 또 다른 기능을 모두 분석하 blurfrom 및 blurto 데이터입니다.

Answer 14

explicitoriginalTarget이있는 솔루션은 텍스트 입력-텍스트 입력 점프에 대해서는 작동하지 않습니다.

버튼을 다음 텍스트 입력으로 바꾸면 차이점이 표시됩니다.

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

Answer 15

나는이 같은 기능을 가지고 놀았으며 FF, IE, Chrome 및 Opera가 이벤트의 소스 요소를 제공 할 수 있음을 알았습니다. 나는 사파리를 테스트하지 않았지만 내 추측은 비슷한 것을 가질 수 있다고 생각합니다.

$('#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;
    }
    //...
});

Answer 16

나는 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>

Answer 17

다음과 같이 고칠 수 있습니다.

 event.currentTarget.firstChild.ownerDocument.activeElement

FF의 경우 "explicitoriginalTarget"처럼 보입니다.

앙투안과 j

Answer 18

나는 썼다 대체 솔루션 어떤 요소를 집중하고 "흐릿하게"만드는 방법.

요소를 사용하는 것을 기반으로합니다 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 Complableable Directive를 사용하여 그러한 기능을 구현하는 방법에 관심이있는 사람들을 위해 구경하다.

Answer 19

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 버전에서 테스트를 주석하십시오.

Answer 20

답변에 해킹 만 볼 수 있지만 실제로 사용하기가 매우 쉬운 내장 솔루션이 있습니다. 기본적으로 다음과 같은 초점 요소를 캡처 할 수 있습니다.

const focusedElement = document.activeElement

https://developer.mozilla.org/en-us/docs/web/api/documentorshadowroot/ActiveElement

Answer 21

이 방법:

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

편집하다: 죄송합니다. 나는 질문을 잘못 읽었다.

Answer 22

나는 "this"에서 Onblur 이벤트를 유발하는 필드의 참조를 통과시켜 jQuery를 통해 쉽게 가능하다고 생각합니다.
예를 들어

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

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

감사
모니카

Answer 23

당신은 이것처럼 만들 수 있습니다 :

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