Abrufen des zuvor fokussierte Elements

Ich würde gerne herausfinden, in Javascript, das Vorherige element den Fokus hatte, im Gegensatz zu den aktuellen Fokus. Ich habe auf der Suche durch den DOM und nicht das gefunden, was ich brauche, noch. Gibt es eine Möglichkeit, dies zu tun, jede Hilfe wäre sehr geschätzt werden

InformationsquelleAutor Mick | 2010-09-03

  1. 9

    Jedes mal, wenn ein element fokussiert ist, Sie müssten, um zu speichern, welche es war. Dann, wenn ein anderes element fokussiert ist, konnte Sie abrufen die variable für den vorherigen fokussiertes element.

    Also im Grunde, Sie Ihre single Fokus-handler tun würde 2 Dinge:

    1. Prüfen, ob previousFocus definiert ist. Wenn es ist, es abzurufen.
    2. Set previousFocus, um das aktuell fokussierte element.

    Hier ist eine kurze demo mit jQuery (Sie können raw JS auch... nur weniger Zeilen B jQuery, so dass es einfacher zu verstehen, imo):

      //create an anonymous function that we call immediately
  //this will hold our previous focus variable, so we don't
  //clutter the global scope
(function() {

      //the variable to hold the previously focused element
    var prevFocus;

      //our single focus event handler
    $("input").focus(function() {

          //let's check if the previous focus has already been defined
        if (typeof prevFocus  !== "undefined") {

              //we do something with the previously focused element
            $("#prev").html(prevFocus.val());
        }

          //AFTER we check upon the previously focused element
          //  we (re)define the previously focused element
          //  for use in the next focus event
        prevFocus = $(this);
    });
})();

    arbeitet jsFiddle

    InformationsquelleAutor Peter Ajtai

  2. 7

    Gerade diese Frage, während die Lösung, die genau das gleiche problem und festgestellt, es war so alt, dass die jQuery Welt hat sich ein bisschen auf 🙂

    Dies sollte eine wirksamere version des Peter Ajtais-code, da es nur eine einzige Delegierte event-handler (nicht einer pro input-element).

    //prime with empty jQuery object
window.prevFocus = $();

//Catch any bubbling focusin events (focus does not bubble)
$(document).on('focusin', ':input', function () {

    //Test: Show the previous value/text so we know it works!
    $("#prev").html(prevFocus.val() || prevFocus.text());

    //Save the previously clicked value for later
    window.prevFocus = $(this);
});

    JSFiddle: http://jsfiddle.net/TrueBlueAussie/EzPfK/80/

    Hinweise:

    • Verwendet $() erstellt eine leere jQuery-Objekt (kann es sofort verwendet werden).
    • Wie diese verwendet die jQuery :input selector funktioniert es mit select & button Elemente sowie Eingänge.
    • Es nicht nötig, einen DOM-ready-handler als document ist immer vorhanden.
    • Wie die zuvor fokussierte Steuerelement ist erforderlich "elsehere" ist einfach gespeichert window für den weltweiten Einsatz, so dass es nicht brauchen eine IIFE-Funktion-wrapper.
    focusin funktioniert nicht in Firefox link
    Haben Sie versucht, dies mit jQuery (die in der Regel kompensiert gebrochen browser-Implementierungen)? Ich habe gerade versucht mein JSFiddle jsfiddle.net/TrueBlueAussie/EzPfK/80 mit FireFox und es funktioniert Prima. 🙂
    Bestätigen, es funktioniert einwandfrei in FF.
    Wirklich Sinnvoll ist auch das arbeiten in FireFox und Microsoft Rand.

    InformationsquelleAutor Gone Coding

  3. 1

    Gut je nachdem, was Ihre Seite macht, es könnte schwierig sein, aber für den Anfang könnte man einen "blur" - event-handler angebracht, um die <body> element, das nur Verstecke der Veranstaltung Ziel.

    InformationsquelleAutor Pointy

  4. 0

    Mir scheint dies eine leichte Verbesserung auf den Weg Kodierung Antwort:

    window.currFocus = document;
//Catch focusin 
$(window).on( 'focusin', function () {
  window.prevFocus = window.currFocus;
  console.log( '£ prevFocus set to:');
  console.log( window.currFocus );
  window.currFocus = document.activeElement;
});

    ... es gibt keine Festlegung in der Frage, wir reden hier ausschließlich über INPUTs hier: es heißt "Vorherige Elemente". Der obige code auch die Aufnahme konzentrieren, Dinge wie BUTTONs, oder irgendetwas in der Lage ist, zu konzentrieren.

    InformationsquelleAutor mike rodent

  5. 0

    Hier ist ein etwas anderer Ansatz, die Uhren sowohl focusin und focusout, in diesem Fall zu verhindern, konzentrieren sich auf eine Klasse von Eingaben:

    <input type="text" name="xyz" value="abc" readonly class="nofocus">
<script>
$(function() {
        var leaving = $(document);
        $(document).on('focusout', function(e) {
                leaving = e.target;
        });
        $( '.nofocus' ).on('focusin', function(e) {
                leaving.focus();
        });
        $( '.nofocus' ).attr('tabIndex', -1);
});
</script>

    Einstellung tabIndex verhindert Tastatur-Benutzer von "steckenbleiben".

    InformationsquelleAutor John Hascall

Schreibe einen Kommentar