All geek questions in one place

Getting a previously focused element

I would like to know in Javascript in which the previous element had focus and not current focus. I was browsing the DOM and have not yet found what I need. Is there any way to do this, any help would be much appreciated

+3
source share
5 answers

Each time an element is focused, you will need to save it. Then, when another element is focused, you can get a variable for the previous focused element.

So, your single focus handler will do 2 things :

  • Check if the value of previousFocus is defined. If so, remove it.
  • Set the previous focus to the current focused item.

jQuery ( raw JS ... w jQuery, 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 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);
    });
})();

jsFiddle

+7

, , , jQuery :)

Peter Ajtai, ( ).

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

:

  • $() jQuery ( ).
  • jQuery :input, select button, .
  • DOM, document .
  • , "elsehere" window , IIFE.
+5

, , , , "blur", <body>, .

+1

, Gone Coding:

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

... , INPUT : " ". , BUTTON s , .

0

Here is a slightly different approach that monitors focusinand focusout, in this case, to prevent focusing on the class of inputs:

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

The setting tabIndexprevents keyboard users from getting stuck.

0
source

Source: https://habr.com/ru/post/1763175/

More articles:


All Articles