Question

我有一个包含多个文本输入的HTML表单。我想在按下“清除”按钮时清除焦点紧接在之前的元素。如何在JavaScript中获取该元素？

注意：重新考虑将评论纳入考虑范围。

Answer 1

创建一个全局变量来存储当前焦点元素的id，

var cur_id;

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

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

并将id设置为该函数的全局变量

function setId(id) {
    cur_id = id;
}

并编写一个清除按钮的功能，如此

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

Answer 2

单击“清除”按钮时，只有元素聚焦为“清除”按钮。你必须解决它。（触发onblur事件）

Answer 3

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='';

Answer 4

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

现场演示：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的引用。但是，在所有浏览器中实现这一点非常棘手。

Answer 5

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

Answer 6

处理上述想法，如果您正在使用表单，则可以定义隐藏的输入并为其分配最后一个重点输入的ID：

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

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

然后在适当的时间拿起值：

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

Answer 7

即使在触摸屏上，也可以使用'pointerdown'事件在Tim Down的答案上建立我的答案。

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

可以在点击清除按钮时触发事件并将其保存在状态中，然后可以查询状态并获取最后一个焦点并触发元素上的焦点。

为此，您可以使用辅助代码：

let lastFocus;
let currentFocus = document.activeElement;

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

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

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

8 个答案: