如何确定IE 11中获取焦点的元素

Question

我希望在(Chrome, IE 6-10)中使用focusout事件，或在Firefox中使用blur事件来知道哪个元素将要获得焦点。 在Chrome和IE 11之前的浏览器中，可以使用以下代码：

$(input).focusout(function (event) {
            "use strict";
            console.log("next focused element: ", event.relatedTarget);
        });

在Firefox中，可以使用以下代码：

$(input).blur(function (event) {
            "use strict";
             console.log("next focused element:",  event.originalEvent.explicitOriginalTarget);
            });

问题出在IE 11上，我找不到任何在IE 11上实现的方法。有没有人已经找到了解决方案？

这里是用IE 11测试的fiddle。 http://jsfiddle.net/govanm/y87sekzd/5/

- Govan

---

event.relatedTarget 在 IE11 上运行良好：http://jsfiddle.net/twd491pp/1/ - Alvaro Montoro

奇怪。@AlvaroMontoro 您的小提琴显然正在工作。但我确定有错误。看看这个：https://connect.microsoft.com/IE/feedback/details/814285/focus-and-blur-events-should-have-relatedtarget - Govan

我现在测试了你的fiddle。如果你从输入框中删除id属性，那么你将得到null值。我的问题是我不能给整个页面添加id属性。我们正在使用一些由另一家公司编写的代码框架，它们没有id属性。@AlvaroMontoro - Govan

如果您删除id属性，则必须将JSFiddle代码从event.relatedTarget.id更改为event.relatedTarget（因为没有id，所以该值将为null）。然后，您会发现IE11正确地返回了“object HTMLInputElement”：http://jsfiddle.net/twd491pp/4/。 - Alvaro Montoro

现在我基于我的代码创建了一个fiddle。请尝试一下这个链接：http://jsfiddle.net/govanm/y87sekzd/5/ @AlvaroMontoro - Govan

我现在能看到这个bug了，而且我想出了一个IE11的解决方法，让我把它作为答案发布，因为它有点长。 - Alvaro Montoro

Answer 1

我能看到你在评论中分享的JSFiddle上的问题，并且我能想出一个解决方法。

这个解决方法的思路是，在发生focusout事件之前，触发目标元素上的一些选择/聚焦事件。因此我们可以使用一些辅助变量来跟踪它：

var nextElement = null;

$("input").on("select click mousedown pointerdown mspointerdown", function() {
    nextElement = this;
});

我使用了不同的事件，当元素被选中时（使用鼠标或键盘），会触发这些事件，在focusout事件之前发生。

现在我们有了nextElement，在当前元素的focusout事件中，我们将检查event.relatedTarget的值。如果它不是null（除了IE11），我们将使用它；如果它是null（IE11），我们将使用nextElement变量代替：

var nextFocus =  event.relatedTarget ? event.relatedTarget : nextElement;

$("#p1").append("<div>next focused element: " + nextFocus.id + "</div>");

那么我们就不会影响其他浏览器的行为，一旦IE11修复了您在评论中分享的已知漏洞，它就能正常工作。

整个代码看起来像这样：

var nextElement = null;

$("input").on("select click mousedown pointerdown mspointerdown", function() {
  nextElement = this;
});

$("input").focusout(function (event) {

  "use strict";

  var nextFocus =  event.relatedTarget ? event.relatedTarget : nextElement;

  $("#p1").append("<div>next focused element: " + nextFocus.id + "</div>");

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="group">
    <tbody>
    <tr></tr>
    <tr>
        <td class="field_title">
            <div class="widget_title widget_committed"><span id="sales_responsbile_part_last_name_field-title">* Last name:</span>
            </div>
        </td>
        <td class="field_widget">
            <div class="configurationWidget_configuration-custom-text-widget_0">
                <div class="widget_input"><input type="text" name="sales_responsbile_part_last_name_field" value="gf" id="in1">
                </div>
            </div>
        </td>
        <td class="field_filler"></td>
    </tr>
    <tr>
        <td class="field_title">
            <div class="widget_title widget_committed"><span id="sales_responsbile_part_first_name_field-title">* First name:</span>
            </div>
        </td>
        <td class="field_widget">
            <div class="configurationWidget_configuration-custom-text-widget_0">
                <div class="widget_input"><input type="text" name="sales_responsbile_part_first_name_field" value="hj" id="in2">
                </div>
            </div>
        </td>
        <td class="field_filler"></td>
    </tr>
    <tr>
        <td class="field_title">
            <div class="widget_title widget_committed"><span id="sales_responsbile_part_title_field-title">Title:</span>
            </div>
        </td>
        <td class="field_widget">
            <div class="configurationWidget_configuration-custom-text-widget_0">
                <div class="widget_input"><input type="text" name="sales_responsbile_part_title_field" value="hj" id="in3"></div>
            </div>
        </td>
        <td class="field_filler"></td>
    </tr>
    <tr>
        <td class="field_title">
            <div class="widget_title widget_committed"><span
                    id="sales_responsbile_part_phone_field-title">* Phone:</span></div>
        </td>
        <td class="field_widget">
            <div class="configurationWidget_configuration-custom-text-widget_0">
                <div class="widget_input"><input type="text" name="sales_responsbile_part_phone_field" value="jhjh" id="in4">
                </div>
            </div>
        </td>
        <td class="field_filler"></td>
    </tr>
    <tr>
        <td class="field_title">
            <div class="widget_title widget_committed"><span
                    id="sales_responsbile_part_mobile_field-title">Alt. phone:</span></div>
        </td>
        <td class="field_widget">
            <div class="configurationWidget_configuration-custom-text-widget_0">
                <div class="widget_input"><input type="text" name="sales_responsbile_part_mobile_field" value="hjh" id="in5">
                </div>
            </div>
        </td>
        <td class="field_filler"></td>
    </tr>
    <tr>
        <td class="field_title">
            <div class="widget_title widget_committed"><span
                    id="sales_responsbile_part_email_field-title">* E-mail:</span></div>
        </td>
        <td class="field_widget">
            <div class="configurationWidget_configuration-custom-text-widget_0">
                <div class="widget_input"><input type="text" name="sales_responsbile_part_email_field" value="hjh" id="in6">
                </div>
            </div>
        </td>
        <td class="field_filler"></td>
    </tr>
    <tr>
        <td class="field_title">
            <div class="widget_title widget_committed"><span id="sales_responsbile_part_sales_channel_field-title">Sales channel:</span>
            </div>
        </td>
        <td class="field_widget">
            <div class="configurationWidget_configuration-custom-text-widget_0">
                <div class="widget_input"><input type="text" name="sales_responsbile_part_sales_channel_field"
                                                 value="hjh" id="in7"></div>
            </div>
        </td>
        <td class="field_filler"></td>
    </tr>
    <tr>
        <td class="field_title">
            <div class="widget_title widget_committed"><span
                    id="sales_responsbile_part_sales_responsbile_segment_field-title">Sales responsible segment:</span>
            </div>
        </td>
        <td class="field_widget">
            <div class="configurationWidget_configuration-custom-text-widget_0">
                <div class="widget_input"><input type="text"
                                                 name="sales_responsbile_part_sales_responsbile_segment_field"
                                                 value="jhjh" id="in8"></div>
            </div>
        </td>
        <td class="field_filler"></td>
    </tr>
    <tr>
        <td class="field_title">
            <div class="widget_title widget_committed"><span id="sales_responsbile_part_sales_team_field-title">Sales team:</span>
            </div>
        </td>
        <td class="field_widget">
            <div class="configurationWidget_configuration-custom-text-widget_0">
                <div class="widget_input"><input type="text" name="sales_responsbile_part_sales_team_field" value="hjh" id="in9">
                </div>
            </div>
        </td>
        <td class="field_filler"></td>
    </tr>
    </tbody>
</table>
 <p id="p1">Test</p>

您可以在此JSFiddle中查看：http://jsfiddle.net/y87sekzd/7/

- Alvaro Montoro

---

感谢您提供的解决方法。我已经接受了它作为答案。但是，我想知道所有HTML元素的焦点，而不仅仅是输入框。例如链接、文本区域等等。是否有一种方法可以将其推广到所有元素？ - Govan

你可以使用 $("*") 来将其应用于所有元素，而不是使用 $("input")。 - Alvaro Montoro