JSFiddle - React, Tailwind, and code Playground

by lborgman

HTML

<input type="search" id="the-search" autofocus />
<a href="javascript:alert('dummy')">Just for focus/blur events</a>
<button id="clear-btn">Clear log</button>
<div id="output"></div>

CSS

#the-search {
    border: 1px solid red;
    width: 40px;
    font-size: 14px;
}
#output {
    background: #ccc;
    padding: 20px;
}
#output div {
    padding: 0;
    margin: 0;
}

JavaScript

var theSearch    = document.getElementById("the-search");
var theOutputDiv = document.getElementById("output");
var theClear     = document.getElementById("clear-btn");

function logIt(txt) {
    var log = document.createElement("div");
    log.innerHTML = txt;
    theOutputDiv.appendChild(log);
}
function logScroll(txt) {
    logIt(txt+", scrollLeft="+theSearch.scrollLeft);
}
theClear.addEventListener("click", function() { theOutputDiv.innerHTML = ""; });
logIt("This is an event log:");

theSearch.addEventListener("blur", function() { logScroll("blur"); });
theSearch.addEventListener("change", function() { logScroll("change"); });
theSearch.addEventListener("focus", function() { logScroll("focus"); });
theSearch.addEventListener("input", function() { logScroll("input"); });
theSearch.addEventListener("keydown", function() { logScroll("keydown"); });
theSearch.addEventListener("keyup", function() { logScroll("keyup"); });
theSearch.addEventListener("scroll", function() { logScroll("scroll"); });