Javascript focus detection

by jarosciak

HTML

<br><b>GMAIL - writing an email (subject box):</b>
<br>
<input type="text" name="subject" id=":w0" value="mojsubject">
<br>
<br><b>GMAIL - writing an email (body box):</b>
<br>
<div id=":p7" class="Am Al editable LW-avf" hidefocus="true" aria-label="Message Body" g_editable="true" role="textbox" contenteditable="true" tabindex="1" style="direction: ltr; min-height: 309px;" itacorner="6,7:1,1,0,0">testbody</div>
<hr />
<div>
    <p><strong>Result</strong> (updates every second):</p>Focused Element: <span id='active-element'></span> 
</div>
<div id="console-log"></div>

CSS

.scrolldiv {
    float: left;
    margin: 20px;
    padding: 10px;
    background: #eee;
    width: 300px;
    height: 300px;
    overflow: auto;
}
span {
    color: blue;
}
.foot-note {
    font-size: 0.8em;
}

JavaScript

setInterval(function () {

    var active = document.activeElement;

    if (active.tagName === 'DIV') {

        try {

            selObj = window.getSelection();
            var selRange = selObj.getRangeAt(0);
            selCont = selRange.startContainer;
            var valueOfField = selCont.data;


            $('#active-element').text("tag Name: " + active.tagName + " | tag ID: " + active.id + " | tag text: " + valueOfField);

        } catch (err) {}

    } else if (active.tagName === 'INPUT') {

        try {
            if (document.getElementById(active.id).value.length > 0) {
                $('#active-element').text("tag Name: " + active.tagName + " | tag ID: " + active.id + " | tag text: " + document.getElementById(active.id).value);
            }

        } catch (err) {}

    }

}, 500);