Question

我想在Javascript中找出哪个前一个元素具有焦点而不是当前焦点。我一直在浏览DOM，但还没找到我需要的东西。有没有办法做到这一点任何帮助将不胜感激

Answer 1

每次元素聚焦时，你都必须存储它是哪一个。然后当另一个元素被聚焦时，您可以检索前一个聚焦元素的变量。

基本上，你的单个焦点处理程序会执行 2件事：

检查是否定义了previousFocus。如果是，请检索它。
将previousFocus设置为当前关注的元素。

这是一个使用jQuery的快速演示（你也可以使用原始的JS ...只需更少的行jQuery，所以它更容易理解imo）：

  // create an anonymous function that we call immediately
  // this will hold our previous focus variable, so we don't
  // clutter the global scope
(function() {

      // the variable to hold the previously focused element
    var prevFocus;

      // our single focus event handler
    $("input").focus(function() {

          // let's check if the previous focus has already been defined
        if (typeof prevFocus  !== "undefined") {

              // we do something with the previously focused element
            $("#prev").html(prevFocus.val());
        }

          // AFTER we check upon the previously focused element
          //   we (re)define the previously focused element
          //   for use in the next focus event
        prevFocus = $(this);
    });
})();

working jsFiddle

Answer 2

在解决完全相同的问题时发现了这个问题，并意识到它已经过时了jQuery世界已经发生了一些变化：）

这应该提供更有效的Peter Ajtai代码版本，因为它只使用一个委托事件处理程序（不是每个输入元素一个）。

// prime with empty jQuery object
window.prevFocus = $();

// Catch any bubbling focusin events (focus does not bubble)
$(document).on('focusin', ':input', function () {

    // Test: Show the previous value/text so we know it works!
    $("#prev").html(prevFocus.val() || prevFocus.text());

    // Save the previously clicked value for later
    window.prevFocus = $(this);
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/EzPfK/80/

备注：

使用$（）创建一个空的jQuery对象（允许它立即使用）。

因为这个使用了jQuery :input选择器，所以它适用于select＆amp; button元素以及输入。

它不需要DOM就绪处理程序，因为document始终存在。

由于需要先前关注的控制，否则＆＃34;其他＆＃34; is简单地存储在window以供全局使用，因此它不需要IIFE函数包装器。

Answer 3

根据您网页的其他内容，这可能会非常棘手，但对于初学者而言，您可以将“模糊”事件处理程序附加到仅隐藏事件目标的<body>元素。

Answer 4

对我而言，这对Gone Coding的回答似乎略有改善：

window.currFocus = document;
// Catch focusin 
$(window).on( 'focusin', function () {
  window.prevFocus = window.currFocus;
  console.log( '£ prevFocus set to:');
  console.log( window.currFocus );
  window.currFocus = document.activeElement;
});

...我们在这里专门谈论INPUT的问题没有规定：它说＆＃34;以前的元素＆＃34;。上面的代码还包括记录BUTTON s之类的内容，或任何能够获得焦点的内容。

Answer 5

这是一种略微不同的方法，可以同时监视focusin和focusout，在这种情况下可以防止将注意力集中在一类输入上：

<input type="text" name="xyz" value="abc" readonly class="nofocus">
<script>
$(function() {
        var leaving = $(document);
        $(document).on('focusout', function(e) {
                leaving = e.target;
        });
        $( '.nofocus' ).on('focusin', function(e) {
                leaving.focus();
        });
        $( '.nofocus' ).attr('tabIndex', -1);
});
</script>

设置tabIndex可防止键盘用户“卡住”。

Answer 6

document.getElementById('message-text-area').addEventListener('focus',
  event => console.log('FOCUS!')
);

event.relatedTarget包含有关先前关注的元素的所有数据。

另请参阅https://developer.mozilla.org/en-US/docs/Web/API/Event/Comparison_of_Event_Targets

检索以前关注的元素

6 个答案:

working jsFiddle