How do I get the previously focused element in JavaScript?

Question

I have an HTML form with multiple text inputs. I want to clear the element that had the focus immediately prior to when the 'Clear' button is pressed. How do I get that element in JavaScript?

Note: Reworded to take comments into account.

Answer 1

Create a global variable for storing the current focused element's id,

var cur_id;

call one function for onblur of each of elements and pass id

<input type="text" id="name" name="name" onBlur="setId(this.id)">

and write the set the id to global variable from that function

function setId(id) {
    cur_id = id;
}

and write a function for onclick of clear button, like this

function clear() {
    document.getElementById(cur_id).value = "";
}

Answer 2

When you click "clear" button, only element focused is "clear" button. You'll have to workaround it. (trigger onblur event)

Answer 3

The simplest way is to store a reference to document.activeElement within the mousedown event on the button, although this is a mouse-centric approach and won't work for button "clicks" from keyboards and other devices.

Live demo: http://jsfiddle.net/tEP6w/

Code:

var clearButton = document.getElementById("clear");
var previousActiveElement = null;

clearButton.onmousedown = function() {
    previousActiveElement = document.activeElement;
};

clearButton.onclick = function() {
    if (previousActiveElement && previousActiveElement != this) {
        previousActiveElement.value = "";
    }
};

A better approach would be to store a reference to document.activeElement as the button is about to receive the focus. However, this is a little tricky to achieve nicely in all browsers.

Answer 4

var focused, inputs = document.getElementsByTagName('input');
for (var i=0, input; i<inputs.length && (input = inputs[i]); i++) {
    if (input.type === 'text') {
        input.addEventListener('focus', function(){
            focused = this;
        });
    }
}

Or in jQuery: var focused; $('input:text').focus(function(){focused = this;});

Then, when you want to clear the focused element, focused.value='';

Answer 5

As Genesis mentions, the clear button will have the focus when clicked. However, you may be able to work around this by having an onBlur event for your form that would store the id of the previously touched element in a variable or hidden form input.

Answer 6

Working on the ideas above, and if you're working with a form, you can define a hidden input and assign it a value of the last focused input's id:

<input type="hidden" id="focused_element" value="">

$('input:text, textarea').focus(function() {
    $('#focused_element').val($(this).attr('id'));
});

and then pick up the value at the appropriate later time:

var focused = $('#focused_element').val();

Answer 7

Building my answer on Tim Down's answer, using 'pointerdown' event will work even on touchscreens.

var toBeCleared;

const btnClear = document.querySelector('#btn-clear'); // your clear button

btnClear.addEventListener('pointerdown', function(event) {
  toBeCleared = document.activeElement;
});

btnClear.addEventListener('click', function(event) {
  toBeCleared.value = "";
});

Answer 8

You can trigger an event when a clear button was clicked and save it in a state, after that you can consult the state and get the last focus and trigger focus on the element.

To do that you can use the auxiliary code:

let lastFocus;
let currentFocus = document.activeElement;

function setCurrentFocusAsLastFocus() {
  currentFocus = document.activeElement;
  lastFocus = currentFocus;
}

function backToLastFocus() {
  lastFocus.focus();
  document.getElementById(lastFocus.id).focus();
}

Answer 9

I don't know if this is a good place to put this or someone else already wrote this exact solution. But this is my take. And I only tested this in chrome.

I discovered that the "focusin" event bubbles on MDN (https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event), followed the trail to "focusout" and tested this code and it worked for me

This would work without having to select all elements and track them all at once or having to declare 2 variables for tracking the previous and current

(function trackActiveElement () {

    document.lastActiveElement = undefined;

    document.addEventListener("focusout",function( focusEvent ) {
        var target = focusEvent.target;
        document.lastActiveElement = target
    })
    
}())