How do I determine which element is receiving focus, i.e. eleven
I want the focusout event (Chrome, Ie 6-10) or the blur event in Firefox to know which elements are about to receive. In chrome and IE before 11, the following code can be used:
$(input).focusout(function (event) {
"use strict";
console.log("next focused element: ", event.relatedTarget);
});
In Firefox you can use the following code:
$(input).blur(function (event) {
"use strict";
console.log("next focused element:", event.originalEvent.explicitOriginalTarget);
});
The problem is in IE 11. I cannot find a way to do this in IE 11. Has anyone found a solution for this?
Here is a fiddle to test with ie11. http://jsfiddle.net/govanm/y87sekzd/5/
source to share
I could see the issue on the JSFiddle that you shared in the comments and I was able to find a solution to resolve the issue.
The idea behind this workaround is that a focusout
select / focus event is fired on the target element before it happens . Therefore, we can track this using some helper variable:
var nextElement = null;
$("input").on("select click mousedown pointerdown mspointerdown", function() {
nextElement = this;
});
I used different events that will fire when an item is selected (using the mouse or keyboard) and happen before the event focusout
.
Now that we have nextElement
, in the event of the focusout
current item, we will check the value event.relatedTarget
. If it's not null (everything except IE11), we'll use it; if it's null (IE11), we'll use a variable instead nextElement
:
var nextFocus = event.relatedTarget ? event.relatedTarget : nextElement;
$("#p1").append("<div>next focused element: " + nextFocus.id + "</div>");
This way, we will not influence the behavior of other browsers and it will work after IE11 corrects the error information you shared in the comments.
The whole code will look like this:
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>
And you can see it on this JSFiddle: http://jsfiddle.net/y87sekzd/7/
source to share