JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" id="texto" />
<table id="mytable">
<tr><td>Item 1</td><td>R$ 300</td></tr>
<tr><td>Item 2</td><td>R$ 500</td></tr>
</table>
<div id="output"></div>
<div id="events"></div>
CSS
#output, #events {
font-size: 0.8em;
color: #555;
margin: 10px;
}
.ativo {
background-color: #00F;
color: white;
}
table {
border-collapse: collapse;
}
tr {
border: 1px solid black;
}
td {
padding: 5px;
}
JavaScript
$(function () {
var range;
$("#texto").on("focus", function (e) {
// IE
$("#mytable>*").attr("tabindex", -1);
});
$("#texto").on("keyup mouseup", function (e) {
// IE
range = document.selection && document.selection.createRange();
debugEventos(e, range);
});
$("#texto").on("blur", function (e) {
debugVars(e);
var focoMovendoPara =
e.originalEvent.explicitOriginalTarget
|| e.originalEvent.relatedTarget
|| e.originalEvent.toElement
|| e.originalEvent.x
&& e.originalEvent.y
&& document.elementFromPoint(
e.originalEvent.x,
e.originalEvent.y)
|| document.activeElement;
// FF
if (focoMovendoPara.noteType == 3)
focoMovendoPara = focoMovendoPara.parentNode;
if ($("#mytable").find(focoMovendoPara).length) {
var $this = $(this);
// FF: setTimeout
setTimeout(function() {
$this.focus();
range && range.select(); // IE
}, 0);
$this.focus();
range && range.select(); // IE
e.preventDefault();
}
else {
// IE
$("#mytable>*").removeAttr("tabindex");
}
});
$("#mytable > tbody > tr").on("click", function (e) {
$(this).siblings().removeClass("ativo");
$(this).addClass("ativo");
});
});
// DAQUI PARA BAIXO É SÓ DEBUG
debugEventos = function (e, range) {
$("#events").append(
e.type + "; " +
(range && range.text || "Não é o IE: seleção mantida sem intervenção") + "<br/>");
};
debugVars = function(e) {
$("#output").html(
"time = " + new Date() + "<br/>" +
"explicitOriginalTarget = " +
e.originalEvent.explicitOriginalTarget +
...