Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Retrieving previously focused element

Tags:

javascript

I would like to find out, in Javascript, which previous element had focus as opposed to the current focus. I've been looking through the DOM and haven't found what I need, yet. Is there a way to do this any help would be much appreciated

like image 765
Mick Avatar asked Sep 03 '10 22:09

Mick


People also ask

How do you find the focus element?

To check whether a specific element has focus, it's simpler: var input_focused = document. activeElement === input && document. hasFocus();

How do you remove focus from current element?

The blur() method removes focus from an element.

What is a focused element?

The focused element is the element that will receive keyboard and similar events by default.

What is focused in JavaScript?

JavaScript | Focus() JavaScript focus method is used to give focus to a html element. It sets the element as the active element in the current document. It can be applied to one html element at a single time in a current document. The element can either be a button or a text field or a window etc.


2 Answers

Each time an element is focused, you'd have to store which one it was. Then when another element is focused, you could retrieve the variable for the previous focused element.

So basically, your single focus handler would do 2 things:

  1. Check if previousFocus is defined. If it is, retrieve it.
  2. Set previousFocus to the currently focused element.

Here is a quick demo with jQuery (you can use raw JS too... just fewer lines w jQuery, so it's easier to understand 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);
    });
})();

working jsFiddle

like image 113
Peter Ajtai Avatar answered Sep 25 '22 02:09

Peter Ajtai


Just found this question while solving the exact same problem and realised it was so old the jQuery world has moved on a bit :)

This should provide a more effective version of Peter Ajtais code, as it will use only a single delegated event handler (not one per 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/

Notes:

  • Uses $() to create an empty jQuery object (allows it to be used immediately).
  • As this one uses the jQuery :input selector it works with select & button elements as well as inputs.
  • It does not need a DOM ready handler as document is always present.
  • As the previously focused control is required "elsehere" is is simply stored on window for global use, so it does not need an IIFE function wrapper.
like image 35
Gone Coding Avatar answered Sep 25 '22 02:09

Gone Coding