Kiedy wystąpi zdarzenie "rozmycie", Jak mogę dowiedzieć się, do którego elementu focus poszedł *?

2015 odpowiedź : zgodnie z Ui Events, możesz użyć relatedTarget właściwość zdarzenia:

Używane do identyfikacji wtórnego EventTarget związane z fokusem Zdarzenie, w zależności od rodzaju zdarzenia.

Dla blur wydarzenia,

relatedTarget: cel zdarzenia otrzymujący fokus.

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 obsługuje relatedTarget do wersji 48 (bug 962251, MDN ).

Rozwiązałem to ostatecznie z timeoutem na wydarzeniu 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
  }
});

Instancje type FocusEvent mają atrybut relatedTarget, 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 Autocompleter ignorował rozmycie, jeśli dany element kliknie i ma działające rozwiązanie, ale tylko dla Firefoksa ze względu na explicitOriginalTarget

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 zawija domyślną metodę Onblur Autocompleter i sprawdza, czy parametry ignoreBlurEventElement są ustawione. jeśli jest ustawiony, sprawdza za każdym razem, czy kliknięty element jest ignoreBlurEventElement, czy nie. Jeśli tak, Autocompleter nie wywołuje onBlur, w przeciwnym razie wywołuje onBlur. Jedynym problemem jest to, że działa tylko w Firefoksie, ponieważ właściwość explicitOriginalTarget jest specyficzna dla Mozilli . Teraz staram się znaleźć inny sposób niż za pomocą explicitOriginalTarget. Rozwiązanie, o którym wspomniałeś, wymaga ręcznego dodania zachowania onclick do elementu. Jeśli nie uda mi się rozwiązać problemu explicitOriginalTarget, myślę, że podążę za twoim rozwiązaniem.

Możesz cofnąć to, co sprawdzasz i kiedy? To jest, jeśli pamiętasz, co było ostatnio zamazane:

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

A następnie w onClick for your span wywołanie funkcji () z obu obiektów:

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

Twoja funkcja może wtedy zdecydować, czy uruchomić Ajax.Sterowanie autouzupełniaczem. Funkcja posiada obiekt kliknięty i obiekt rozmyty. OnBlur już się pojawił, więc nie sprawi, że sugestie znikną.

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

Testuję w Internet Explorer 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.

Użyj czegoś takiego:

var myVar = null;

A następnie wewnątrz funkcji:

myVar = fldID;

A następnie:

setTimeout(setFocus,1000)

A następnie:

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

Kod końcowy:

<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 to niemożliwe, z IE można spróbować użyć window.event.toElement, ale nie działa z Firefoksem!

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

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

• Dokument.activeElement może być węzłem nadrzędnym (na przykład węzłem ciała, ponieważ jest w fazie tymczasowej przełączającej się z celu na inny), więc nie jest użyteczny dla Twojego zakresu
• ev.explicitOriginalTarget nie zawsze jest wartościowany

Więc najlepszym sposobem jest użycie onclick on body event do pośredniego zrozumienia węzła (event.target) jest na blur

Edit: Hakerskim sposobem na to byłoby stworzenie zmiennej, która śledzi ostrość dla każdego elementu, na którym ci zależy. Tak więc, jeśli zależy ci na tym, że "myInput" stracił ostrość, Ustaw zmienną do niego na ostrość.

<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 przypisać ich pozycję w DOM do zmiennej blurfrom, gdy utracą ostrość. Dodatkowo skonfiguruj je tak, aby zyskanie ostrości ustawiało zmienną blurto na Ich pozycję w DOM. Następnie możesz użyć innej funkcji do analizy danych blurfrom i blurto.

Należy pamiętać, że rozwiązanie z explicitOriginalTarget nie działa dla skoków text-input-to-text-input.

Spróbuj zastąpić przyciski następującymi wejściami tekstowymi, 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 dowiedziałem się, że FF, IE, Chrome i Opera mają możliwość dostarczenia elementu źródłowego zdarzenia. Nie testowałem Safari, ale wydaje mi się, ż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ć timeout podczas kodowania javascript, więc zrobiłbym to w odwrotny sposób Michiel Borkent. (Nie próbowałem kodu za, ale powinieneś dostać pomysł).

<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 jak "explicitOriginalTarget" dla FF.

Antoine I J

Napisałem alternatywne rozwiązanie Jak sprawić, by każdy element był skupiony i "blulable".

Polega na stworzeniu elementu jako contentEditable i ukryciu go wizualnie oraz wyłączeniu samego trybu edycji:

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

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

DEMO

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

Related: szukałem rozwiązania dla VueJs, więc dla tych, którzy są zainteresowani / ciekawi jak zaimplementować taką funkcjonalność za pomocą dyrektywy Vue Focusable, proszę spojrzeć .

Widzę tylko hacki w odpowiedziach, ale w rzeczywistości jest wbudowane rozwiązanie bardzo łatwe w użyciu : Zasadniczo można uchwycić element focus w ten sposób:

const focusedElement = document.activeElement

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

W ten sposób:

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

Lub jeśli podłączysz słuchacz za pomocą JavaScript (jQuery w tym przykładzie):

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

Edit: przepraszam. Źle odczytałem pytanie.

Myślę, że łatwo jest to możliwe poprzez jquery, przekazując odniesienie do pola powodującego Zdarzenie onblur w "this".
Dla np.

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

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

Thanks
Monika

Mógłbyś zrobić tak:

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