Wie kann ich beim Auftreten eines „Unschärfe“-Ereignisses herausfinden, welches Element den Fokus erreicht hat?

Question

Angenommen, ich füge eine hinzu blur Funktion zu einem HTML-Eingabefeld wie folgt:

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

Gibt es eine Möglichkeit, die ID des Elements zu ermitteln, das das Problem verursacht hat? blur Ereignis zum Auslösen (des Elements, auf das geklickt wurde) innerhalb der Funktion?Wie?

Angenommen, ich habe eine Spanne wie diese:

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

Wenn ich auf den Bereich klicke, direkt nachdem das Eingabeelement den Fokus hat, verliert das Eingabeelement seinen Fokus.Woher weiß die Funktion, dass dies der Fall war? mySpan das wurde angeklickt?

PS:Wenn das Onclick-Ereignis des Spans vor dem Onblur-Ereignis des Eingabeelements auftreten würde, wäre mein Problem gelöst, da ich einen Statuswert festlegen könnte, der angibt, dass auf ein bestimmtes Element geklickt wurde.

PPS:Der Hintergrund dieses Problems ist, dass ich ein AJAX-Autocompleter-Steuerelement extern (von einem anklickbaren Element) auslösen möchte, um seine Vorschläge anzuzeigen, ohne dass die Vorschläge aufgrund des sofort verschwinden blur Ereignis auf dem Eingabeelement.Also möchte ich das einchecken blur Funktion, wenn auf ein bestimmtes Element geklickt wurde, und wenn ja, ignorieren Sie das Unschärfeereignis.

Answer 1

Hmm ... In Firefox können Sie explicitOriginalTarget verwenden Sie das Element zu ziehen, die angeklickt wurde. Ich erwartete toElement das gleiche für IE zu tun, aber es scheint nicht ... Allerdings zu arbeiten, können Sie das neu fokussierte Element aus dem Dokument ziehen:

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

---

Caveat: Diese Technik funktioniert nicht Arbeit für Fokus Veränderungen durch tabbing durch die Felder mit der Tastatur, und funktioniert nicht bei allen in Chrome oder Safari. Das große Problem mit activeElement mit (außer in IE) ist, dass es nicht konsequent bis aktualisiert wird nach dem blur Ereignis verarbeitet wurde, und kann überhaupt keinen gültigen Wert hat während der Verarbeitung! Dies kann mit einer Variation auf die Technik Michiel mit endete:

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

Das in den meisten modernen Browsern funktionieren soll (getestet in Chrome, IE und Firefox), mit dem Vorbehalt, dass Chrome nicht Fokus auf Tasten eingestellt, die geklickt (vs. Tabbed zu).

Answer 2

Antwort 2015:entsprechend UI-Ereignisse, du kannst den ... benutzen relatedTarget Eigentum der Veranstaltung:

Wird zur Identifizierung einer Sekundärseite verwendet EventTarget im Zusammenhang mit einem Fokus Ereignis, abhängig von der Art des Ereignisses.

Für blur Veranstaltungen,

relatedTarget: Ereignisziel Fokus erhalten.

Beispiel:

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

Hinweis: Firefox unterstützt nicht relatedTarget bis Version 48 (Fehler 962251, MDN).

Answer 3

Ich löste es schließlich mit einem Timeout auf dem onblur Ereignisse (dank den Rat eines Freundes, der nicht Stackoverflow ist):

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

Funktioniert sowohl in IE und FF.

Answer 4

Es ist möglich, mousedown- Ereignis des Dokuments statt Unschärfe zu verwenden:

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

Answer 5

Der Typ FocusEvent Instanzen Attribut relatedTarget haben jedoch bis zur Version 47 des FF, und zwar dieses Attribut den Wert null zurück, von 48 bereits funktioniert.

Sie können mehr sehen hier .

Answer 6

Ich versuche, auch Autocompleter Verwischung zu machen ignorieren, wenn ein bestimmtes Element eine Arbeitslösung angeklickt und hat, aber nur für Firefox aufgrund 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);
                }
            }
        }
    );

Dieser Code hüllt Standard onBlur Methode von Autocompleter und prüft, ob ignoreBlurEventElement Parameter eingestellt ist. wenn es gesetzt ist, überprüft es jedes Mal zu sehen, ob geklickt Element ignoreBlurEventElement ist oder nicht. Wenn ja, Autocompleter nicht cal onBlur, sonst ruft sie onBlur. Das einzige Problem dabei ist, dass es funktioniert nur in Firefox explicitOriginalTarget Eigenschaft ist Mozilla spezifisch. Jetzt versuche ich, als die Verwendung von explicitOriginalTarget einen anderen Weg zu finden. Die Lösung, die Sie erwähnt haben, müssen Sie auf das Element Onclick Verhalten manuell hinzufügen. Wenn ich es nicht schaffen explicitOriginalTarget Problem zu lösen, ich denke, ich Ihre Lösung folgen.

Answer 7

Können Sie umkehren, was Sie überprüfen und wann? Das heißt, wenn Sie remeber, was letzte verwischt wurde:

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

und dann im onClick für Ihre Spanne, Call-Funktion () mit den beiden Objekte:

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

Ihre Funktion könnte dann entscheiden, ob die Ajax.Autocompleter Kontrolle auszulösen. Die Funktion hat das geklickt Objekt und , um das unscharfe Objekt. Die onBlur bereits geschehen ist, damit es nicht die Vorschläge verschwinden.

Answer 8

Verwenden Sie so etwas wie folgt aus:

var myVar = null;

Und dann in Ihrer Funktion:

myVar = fldID;

Und dann:

setTimeout(setFocus,1000)

Und dann:

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

Schluss Code:

<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

Ich denke, es ist nicht possibe, mit IE können Sie versuchen, window.event.toElement zu verwenden, aber es mit Firefox funktioniert nicht!

Answer 10

Wie in diese Antwort erwähnt, können Sie den Wert von document.activeElement überprüfen. document ist eine globale Variable, so dass Sie keine Magie zu tun haben, es in Ihrem onBlur Handler zu verwenden:

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

Answer 11

• document.activeElement könnte ein Elternknoten (zum Beispiel Körperknoten, weil es in einer temporären Phase ist von einem Ziel zum anderen umschalten), so dass es nicht verwendbar für Ihren Anwendungsbereich ist
• ev.explicitOriginalTarget ist nicht immer geschätzt

So ist der beste Weg für das Verständnis indirekt Ihren Knoten Onclick auf Körper Ereignis verwenden (event.target) auf Unschärfe

Answer 12

Edit: Ein hacky Weg, es zu tun wäre, um eine Variable zu erstellen, die für jedes Element die Sie interessieren Spur Fokus hält. Wenn Sie also darauf, dass ‚myInput‘ verlorenen Fokus, eine Variable, um es auf Fokus.

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

Original Antwort: Sie können ‚diese‘ an die Funktion übergeben.

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

Answer 13

Ich schlage vor, mit globalen Variablen blurfrom und blurto. Dann konfigurieren, dass alle Elemente, die Sie kümmern sich um ihre Position im DOM auf die Variable blurfrom zuzuweisen, wenn sie den Fokus verlieren. Zusätzlich sie so konfigurieren, dass Fokus gewinnt setzt die Variable blurto auf ihre Position im DOM. Dann könnten Sie eine andere Funktion überhaupt verwenden, um die blurfrom und blurto Daten zu analysieren.

Answer 14

beachten Sie, dass die Lösung mit explicitOriginalTarget nicht funktioniert Text-Eingabe-zu-Text-Eingabe springt.

versuchen Schaltflächen mit den folgenden Text-Eingaben zu ersetzen, und Sie werden den Unterschied sehen:

<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

Ich habe mit dieser gleichen Funktion zu spielen und fand heraus, dass FF, IE, Chrome und Opera haben die Fähigkeit, die Quelle Element eines Ereignis zur Verfügung zu stellen. Ich habe nicht getestet Safari, aber meine Vermutung ist, es haben könnte etwas ähnliches.

$('#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

Ich mag es nicht Timeout zu verwenden, wenn Sie Javascript Codierung, damit ich es in die andere Richtung von Michiel Borkent tun würde. (Haben Sie nicht versuchen, den Code hinter, aber Sie sollten auf die Idee kommen).

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

Im Kopf etwas wie die

<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

Sie können IE fix mit:

 event.currentTarget.firstChild.ownerDocument.activeElement

Es sieht aus wie "explicitOriginalTarget" für FF.

Antoine und J

Answer 18

Ich schrieb eine alternative Lösung wie jedes Element fokussierbar und "blurable" zu machen.

Es ist auf ein Element als contentEditable machen und es visuell versteckt und deaktivieren Editiermodus selbst:

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

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

DEMO

Hinweis: Getestet in Chrome, Firefox und Safari (OS X). Nicht sicher IE.

---

Siehe auch: Ich war für VueJs Suche nach einer Lösung, so dass für diejenigen, die daran interessiert / neugierig, wie diese Funktionalität mit Vue Fokussierbare Richtlinie umzusetzen, einen Blick .

Answer 19

Werke in Google Chrome v66.x, Mozilla v59.x und Microsoft Edge ... Lösung mit jQuery.

  

Ich teste in Internet Explorer 9 und nicht unterstützt.

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

Kommentar Ihren Tests in anderen Internet Explorer-Versionen.

Answer 20

Ich sehe hackt nur in den Antworten, aber es ist eigentlich eine eingebaute Lösung sehr einfach zu bedienen: Grundsätzlich können Sie den Fokus Element wie folgt erfassen:

const focusedElement = document.activeElement

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

Answer 21

Auf diese Weise:

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

Oder wenn Sie den Hörer via JavaScript (jQuery in diesem Beispiel) anhängen:

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

Bearbeiten : sorry. Ich die Frage falsch verstanden.

Answer 22

Ich denke, die leicht möglich über jquery durch den Verweis des Feldes des Bestehen des onblur Ereignis in „diesem“ verursacht.
Für z.

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

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

Danke
Monika

Answer 23

Sie können es so machen:

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