如何在JavaScript中获取以前关注的元素？

我有一个带有多个文本输入的HTML表单。我想在按下“清除”按钮之前立即清除具有焦点的元素。如何在JavaScript中获取该元素

---

注意：重新编写以考虑注释。

当您单击“清除”按钮时，唯一关注的元素是“清除”按钮。你必须解决这个问题。（触发模糊事件）

正如Genesis所提到的，单击“清除”按钮时，焦点将集中。但是，您可以通过为表单设置一个onBlur事件来解决此问题，该事件将以前接触的元素的id存储在变量或隐藏表单输入中。

var-focused，inputs=document.getElementsByTagName（“输入”）；
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;
        });
    }
}

对于（var i=0，输入；i创建一个全局变量，用于存储当前聚焦元素的id

var cur_id;

为每个元素的
onblur
调用一个函数并传递id

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

并编写一个函数，用于单击清除按钮，如下所示

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

最简单的方法是在按钮上的
mousedown
事件中存储对
document.activeElement
的引用，尽管这是一种以鼠标为中心的方法，不适用于键盘和其他设备上的按钮“点击”

现场演示：

代码：

更好的方法是在按钮即将接收焦点时存储对
document.activeElement的引用。然而，这在所有浏览器中都很难实现。
按照上述思路操作，如果您使用的是表单，则可以定义一个隐藏输入并为其分配上一个焦点输入的值用户id:

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

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

在Tim Down的答案的基础上构建我的答案，使用“pointerdown”事件甚至可以在触摸屏上使用

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


是的。这就是问题所在。我试着使用document.activeElement，但没有用。：（哦，这个悖论是悲剧性的…*呜咽呜咽*我讨厌
聚焦
事件没有
模糊
（或类似）属性。它可能是
null
而不是特定元素。@genesisφ-onblur没有达到我的期望：就像其他一些答案所说的那样，您仍然需要费劲保存模糊元素，然后从onfocus处理程序访问它（有些浏览器会以一种奇怪的顺序触发这些事件，这是没有帮助的）。我希望焦点事件本身可以告诉你什么是模糊的，也许模糊事件应该告诉你什么是聚焦的，这样你就不必编写自己的协调代码来实现它。当前聚焦元素在“清除”时按下按钮将是“清除”按钮本身。好吧，我有点傻，显然你想知道哪个字段刚刚失去焦点，但是如果用户使用tab键导航到“清除”怎么办？你应该编辑这个问题的互动程序，因为没有一个答案真正回答“如何在javascript中获得当前焦点元素”我是通过搜索来这里的…@BaptistePernet:看看福佑的答案…哦，对不起，我已经习惯了99%的JavaScript问题都与jquery相关。我会更新答案，但我会花一些时间在手机上输入。如何创建局部变量？我太急躁了know@shesek-这并不突兀，只是很难维持应有的状态到多个内联onblur。（你的答案更好。）整个要求都很突兀，因为没有JavaScript是不可能的。@shesek:它是有效的，不会造成伤害，在上下文中可能是合适的，所以我要说这是一个严厉的否决票。我认为突兀的JavaScript永远都不合适，应该不惜一切代价避免。JavaScript代码不应该存在于HTML页面中，这只是错误虽然如此，我还是撤销了否决票——因为这是一种常见的做法，可能有点太苛刻了。编辑对不起，显然你不能在3小时后撤销投票（除非答案是从那时起编辑的）@shesek：我对答案进行了编辑，以获得更好的代码格式，因此，如果您愿意，现在可以删除否决票。我确实同意，一般来说，不引人注目的JavaScript是一种方法，但我仍然会对一个简单的演示或类似的内容使用事件处理程序属性，因为它比其他备选方案更简单、更快。HTML5仍然支持事件处理程序属性，因此它们不会很快消失。这里的关键似乎是mousedown事件发生在模糊之前，因此您可以记录当时的活动元素。下面是另一个so问题，其中包含有关事件顺序的信息：
<input type="hidden" id="focused_element" value="">

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

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

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