Kiedy pojawia się zdarzenie „rozmycia”, jak mogę dowiedzieć się, który element skupił się na *?

Załóżmy, że dołączam blurfunkcję do pola wprowadzania HTML, takiego jak to:

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

Czy istnieje sposób na uzyskanie identyfikatora elementu, który spowodował blur zdarzenia (elementu, który został kliknięty) wewnątrz funkcji? W jaki sposób?

Załóżmy na przykład, że mam taki zakres:

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

Jeśli kliknę rozpiętość zaraz po skupieniu elementu wejściowego, element wejściowy straci swoje skupienie. Skąd funkcja wie, że tak byłomySpan że została kliknięta?

PS: Gdyby zdarzenie onclick zakresu miało miejsce przed zdarzeniem onblur elementu wejściowego, mój problem zostałby rozwiązany, ponieważ mogłem ustawić pewną wartość statusu wskazującą, że kliknięto określony element.

PPS: Tło tego problemu polega na tym, że chcę uruchomić zewnętrzną kontrolę autouzupełniacza AJAX (z klikalnego elementu), aby pokazać jej sugestie, bez sugestii znikających natychmiast z powodu blurzdarzenia na elemencie wejściowym. Chcę więc sprawdzić w blurfunkcji, czy kliknięto jeden konkretny element, a jeśli tak, zignoruj ​​zdarzenie rozmycia.

Hmm ... W Firefoksie możesz użyć explicitOriginalTargetelementu, który został kliknięty. Oczekiwałem, toElementże zrobię to samo dla IE, ale wydaje się, że to nie działa ... Możesz jednak pobrać nowo skoncentrowany element z dokumentu:

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

Ostrzeżenie: ta technika nie działa w przypadku zmian fokusów spowodowanych tabulowaniem pól za pomocą klawiatury i nie działa w ogóle w Chrome ani Safari. Duży problem z użyciem activeElement(z wyjątkiem IE) jest to, że nie jest stale aktualizowana, aż poblur zdarzenie zostało przetworzone, a może nie mieć prawidłową wartość w ogóle podczas przetwarzania! Można to złagodzić poprzez zmianę techniki, w której Michiel skończył stosując :

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

Powinno to działać w większości nowoczesnych przeglądarek (testowanych w Chrome, IE i Firefox), z zastrzeżeniem, że Chrome nie ustawia ostrości na klikane przyciski (w porównaniu z kartami).

Odpowiedź 2015 : zgodnie z Zdarzeniami interfejsu użytkownika można użyć relatedTargetwłaściwości zdarzenia:

Służy do identyfikowania drugorzędnego EventTargetpowiązanego ze zdarzeniem Focus, w zależności od rodzaju zdarzenia.

Na blurimprezy

relatedTarget: fokus docelowy zdarzenia .

Przykład:

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

Uwaga Firefox nie będzie obsługiwany relatedTargetdo wersji 48 ( błąd 962251 , MDN ).

Rozwiązałem go w końcu z limitem czasu na zdarzeniu onblur (dzięki radom znajomego, który nie jest StackOverflow):

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

Działa zarówno w FF, jak i IE.

Możliwe jest użycie zdarzenia mousedown dokumentu zamiast rozmycia:

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

FocusEventInstancje typu mają relatedTargetatrybut, jednak do wersji 47 FF, w szczególności ten atrybut zwraca null, z 48 już działa.

Możesz zobaczyć więcej tutaj .

Staram się również, aby Autouzupełnianie ignorował rozmycie, jeśli kliknąłby określony element i miał działające rozwiązanie, ale tylko dla Firefoksa z powodu jawnegoOriginalTarget

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

Ten kod otacza domyślną metodę onBlur autouzupełniacza i sprawdza, czy ustawione są parametry ignoreBlurEventElement. jeśli jest ustawiony, sprawdza za każdym razem, czy kliknięty element jest ignoreBlurEventElement, czy nie. Jeśli tak jest, autouzupełnianie nie caluje na Blur, w przeciwnym razie wywołuje Blur. Jedynym problemem jest to, że działa tylko w przeglądarce Firefox, ponieważ właściwość wyraźneOriginalTarget jest specyficzna dla Mozilli. Teraz próbuję znaleźć inny sposób niż użycie jawnegoOriginalTarget. Rozwiązanie, o którym wspomniałeś, wymaga ręcznego dodania zachowania elementu do elementu. Jeśli nie uda mi się rozwiązać problemu z jawnymOriginalTarget, chyba postąpię zgodnie z twoim rozwiązaniem.

Czy możesz cofnąć to, co sprawdzasz i kiedy? To znaczy, jeśli pamiętasz, co zostało zamazane ostatnio:

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

a następnie w onClick dla swojego zakresu, wywołaj funkcję () dla obu obiektów:

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

Twoja funkcja może wtedy zdecydować, czy uruchomić kontrolę Ajax.AutoCompleter. Funkcja ma kliknięty obiekt i obiekt zamazany. OnBlur już się wydarzył, więc nie sprawi, że sugestie znikną.

Użyj czegoś takiego:

var myVar = null;

A potem w twojej funkcji:

myVar = fldID;

I wtedy:

setTimeout(setFocus,1000)

I wtedy:

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

Ostateczny kod:

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

myślę, że nie jest to możliwe, z IE możesz spróbować użyć window.event.toElement, ale nie działa z Firefoksem!

Jak zauważono w tej odpowiedzi , możesz sprawdzić wartość document.activeElement. documentjest zmienną globalną, więc nie musisz robić żadnej magii, aby użyć jej w module obsługi onBlur:

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

• document.activeElement może być węzłem nadrzędnym (na przykład węzłem ciała, ponieważ jest w fazie tymczasowej przełączania się z celu na inny), więc nie można go użyć w twoim zakresie
• ev.explicitOriginalTarget nie zawsze jest wyceniany

Najlepszym sposobem jest użycie zdarzenia kliknięcia na ciele do pośredniego zrozumienia twojego węzła (event.target) jest rozmazany

Działa w Google Chrome v66.x, Mozilla v59.x i Microsoft Edge ... Rozwiązanie z jQuery.

Testuję w Internet Explorerze 9 i nie jest obsługiwany.

$("#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
     }
});

Skomentuj swój test w innych wersjach Internet Explorera.

Edycja: hacking sposób to zrobić, aby utworzyć zmienną, która śledzi fokus dla każdego elementu, na którym ci zależy. Tak więc, jeśli zależy ci na tym, aby „myInput” stracił fokus, ustaw dla niego zmienną fokus.

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

Oryginalna odpowiedź: Możesz przekazać „to” do funkcji.

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

Sugeruję użycie zmiennych globalnych blurfrom i blurto. Następnie skonfiguruj wszystkie elementy, które chcesz, aby przypisały swoją pozycję w DOM do zmiennej blurrom, gdy stracą fokus. Dodatkowo skonfiguruj je tak, aby uzyskanie fokusu ustawiło zmienną blurto na ich pozycję w DOM. Następnie możesz użyć innej funkcji do analizy rozmycia i danych rozmycia do danych.

należy pamiętać, że rozwiązanie z jawnymOriginalTarget nie działa w przypadku skoków wprowadzania tekstu na tekst.

spróbuj zastąpić przyciski następującymi danymi wejściowymi, a zobaczysz różnicę:

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

Grałem z tą samą funkcją i odkryłem, że FF, IE, Chrome i Opera mają możliwość zapewnienia elementu źródłowego wydarzenia. Nie testowałem Safari, ale przypuszczam, że może mieć coś podobnego.

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

Nie lubię używać limitu czasu podczas kodowania javascript, więc zrobiłbym to w odwrotny sposób niż Michiel Borkent. (Nie wypróbowałem kodu, ale powinieneś o tym pomyśleć).

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

W głowie coś takiego

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

Możesz naprawić IE za pomocą:

 event.currentTarget.firstChild.ownerDocument.activeElement

Wygląda to jak „wyraźneOriginalTarget” dla FF.

Antoine And J.

Napisałem alternatywne rozwiązanie jak uczynić dowolny element możliwym do zogniskowania i „rozmytym”.

Polega na utworzeniu elementu jako contentEditablewizualnym ukryciu go i wyłączeniu samego trybu edycji:

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

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

PRÓBNY

Uwaga: Testowane w Chrome, Firefox i Safari (OS X). Nie jestem pewien co do IE.

Powiązane: Szukałem rozwiązania dla VueJ, więc dla tych, którzy są zainteresowani / ciekawi, jak wdrożyć taką funkcjonalność za pomocą dyrektywy Vue Focusable, spójrz .

Tą drogą:

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

Lub jeśli dołączasz nasłuchiwanie przez JavaScript (jQuery w tym przykładzie):

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

Edycja : przepraszam. Źle odczytałem pytanie.

Myślę, że łatwo jest to zrobić za pomocą jquery, przekazując odniesienie do pola powodującego zdarzenie onblur w „this”.
Na przykład

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

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

Dzięki
Monika

Możesz to zrobić tak:

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

Widzę tylko hacki w odpowiedziach, ale tak naprawdę istnieje bardzo łatwe w użyciu wbudowane rozwiązanie: Zasadniczo możesz przechwycić element skupienia w następujący sposób:

const focusedElement = document.activeElement

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