Demonstrates focus detection

document.activeElement vs. jQuery's ":focus" selector

by marketingaddict8

HTML

<div id="test">
  <h1>
  test
  </h1>
</div>
<div class="scrolldiv" tabindex="0">
    <p><strong>Even though you can click on this DIV and then have the arrow keys scroll <em>it</em> specifically, `document.activeElement` will NOT reflect that. You _cannot tab_ to this element - UNLESS you use an explicit 'tabindex' attribute</strong>
<p>       
        Nulla facilisi. Etiam bibendum eleifend auctor. Morbi blandit tincidunt sollicitudin. Sed luctus viverra aliquam. Curabitur in dui nisi, ut molestie ante. Pellentesque lorem libero, ultrices ac molestie sed, rutrum quis massa. Proin condimentum, velit sit amet gravida congue, risus risus consequat dolor, pretium elementum nisi diam vitae ipsum. Maecenas non magna a tortor tristique elementum. Phasellus ac nunc dapibus lorem pellentesque adipiscing varius non ipsum. Nulla accumsan accumsan congue. Aliquam ac risus ac sapien cursus suscipit ac vitae orci. Curabitur a turpis eget justo luctus vehicula.
    </p>
    <p>Aliquam aliquam sapien at leo sollicitudin auctor. Ut cursus mollis lectus vel luctus. Phasellus egestas elementum condimentum. Nam libero felis, pretium nec bibendum vel, convallis a tellus. Phasellus sagittis dolor quis leo pellentesque ullamcorper. Suspendisse non lectus enim, non laoreet felis. Pellentesque diam nibh, semper eu tincidunt sed, euismod sit amet ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae velit sed massa pulvinar viverra. Sed dignissim ullamcorper malesuada. Phasellus faucibus turpis id mauris feugiat in convallis dui molestie. Fusce malesuada nulla nisi.
</div>

<div>
    <p><strong>By contrast, the following elements can receive focus (reflected in `document.activeElement`) by CLICKING *OR* TABBING:
        </strong></p>
    <label>text input:</label>
    <input id="[text]" tabindex="1" />

    <label>text area:</label>
    <textarea ></textarea>
    <select>
        <option value=1>item 1</option>
        <option value=2>item 2</option>
   ...

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

let color = true;
let bgColor = document.querySelector("#test").style.color;
console.log(bgColor);
setInterval(function() { 
    var focused = $(':focus')[0];
    var active = document.activeElement;
    $('#active-el').text(active.tagName+active.id);
    $('#jq-focus').text(focused ? focused.tagName + focused.id : 'undefined');
    console.log(active.nodeType); 
}, 1000);
setInterval(() => {
  color = !color;
  console.log(color);
  document.querySelector("body").style.backgroundColor = (color == true) ? "#333" : "#888"; 
}, 1000);