我有一个带有多个文本输入的 HTML 表单。我想清除在按下“清除”按钮时立即具有焦点的元素。如何在 JavaScript 中获取该元素？
注意：重新措辞以将 cmets 考虑在内。
【问题讨论】：
标签： javascript html
我不知道这是放置这个的好地方，还是其他人已经写了这个确切的解决方案。但这是我的看法。而且我只在 chrome 中测试过这个。
我发现 MDN (https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event) 上的“focusin”事件冒泡，然后跟踪到“focusout”并测试了这段代码，它对我有用
这样就可以工作，而不必选择所有元素并一次跟踪它们，也不必声明 2 个变量来跟踪前一个和当前
(function trackActiveElement () {
document.lastActiveElement = undefined;
document.addEventListener("focusout",function( focusEvent ) {
var target = focusEvent.target;
document.lastActiveElement = target
})
}())
【讨论】：
您可以在点击清除按钮时触发事件并将其保存在状态中，之后您可以查询状态并获取最后一个焦点并触发元素上的焦点。
为此，您可以使用辅助代码：
let lastFocus;
let currentFocus = document.activeElement;
function setCurrentFocusAsLastFocus() {
currentFocus = document.activeElement;
lastFocus = currentFocus;
}
function backToLastFocus() {
lastFocus.focus();
document.getElementById(lastFocus.id).focus();
}【讨论】：
根据 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 = "";
});
【讨论】：
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;
});
}
}
或者在 jQuery 中：
var focused; $('input:text').focus(function(){focused = this;});
然后，当你想清除焦点元素时，focused.value='';
【讨论】：
根据上面的想法，如果您正在使用表单，您可以定义一个隐藏输入并为其分配最后一个焦点输入的 id 值：
<input type="hidden" id="focused_element" value="">
$('input:text, textarea').focus(function() {
$('#focused_element').val($(this).attr('id'));
});
然后在适当的时候取值：
var focused = $('#focused_element').val();
【讨论】：
创建一个全局变量来存储当前焦点元素的id，
var cur_id;
为每个元素的onblur调用一个函数并传递id
<input type="text" id="name" name="name" onBlur="setId(this.id)">
并从该函数将 id 设置为全局变量
function setId(id) {
cur_id = id;
}
并为清除按钮的onclick编写一个函数，如下所示
function clear() {
document.getElementById(cur_id).value = "";
}
【讨论】：
最简单的方法是在按钮上的mousedown 事件中存储对document.activeElement 的引用，尽管这是一种以鼠标为中心的方法，不适用于来自键盘和其他设备的按钮“点击”。
现场演示：http://jsfiddle.net/tEP6w/
代码：
var clearButton = document.getElementById("clear");
var previousActiveElement = null;
clearButton.onmousedown = function() {
previousActiveElement = document.activeElement;
};
clearButton.onclick = function() {
if (previousActiveElement && previousActiveElement != this) {
previousActiveElement.value = "";
}
};
更好的方法是在按钮即将获得焦点时存储对document.activeElement 的引用。但是，要在所有浏览器中很好地实现这一点有点棘手。
【讨论】：
当您单击“清除”按钮时，只有聚焦的元素是“清除”按钮。你必须解决它。 （触发 onblur 事件）
【讨论】：
focus 事件没有justblurred（或类似）属性的方式。它可能是null，它不是特定元素。
正如 Genesis 所述，单击清除按钮时将获得焦点。但是，您可以通过为您的表单设置一个 onBlur 事件来解决此问题，该事件会将先前触摸的元素的 id 存储在变量或隐藏的表单输入中。
【讨论】：