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 ge

Answer 1

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

Answer 2

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

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 6

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.