JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" id="textField" />
<input type="button" onclick="setFocus();" value="click here" />
<ol>
<li>Type some text into the textfield.</li>
<li>Click the button.</li>
<li>Click out of the textfield, or
<br /> <i>press enter for some weird behavior.</i>
</li>
</ol>
JavaScript
function setFocus() {
$("#textField").focus();
$("#textField").select();
var count = 1;
$("#textField").on("focusout keydown", function (e) {
alert('in');
if (/*e.type == "focusout" ||*/ e.keyCode == 9) {
if(e.keyCode == 13){
$(this).unbind('focusout');
}
alert(e.type + ": " + count++);
}
// this doesn't seem to be working correctly:
$("#textField").off("focusout keydown");
});
}