Appends an input to the current page and logs events to the console

makeKeyTester.js

function makeKeyTester(
    listeners = ['keydown'],
    handler = (l, e) => { e.preventDefault(); console.log(l,e); return false; }
) {
    if (!Array.isArray(listeners)) {
        throw new TypeError('listeners must be an Array');
    }
    if (!typeof handler === "function") {
        throw new TypeError('handler must be an Function');
    }

    function keytestEventListener(listener, event) {
        return handler(listener, event);
    }
    function keytestListenerFactory(listener) {
        const fName = `keytestEventListener_${listener}`;
        const r = {};
        r[fName] = (event) => keytestEventListener(listener, event);
        return r[fName];
    }

    function appendInputElement(id) {
        const keytestInputElm = document.getElementById(id);
        if (keytestInputElm) {
            keytestInputElm.remove();
        }

        let elmHTML = "";
        elmHTML += `<input type="text" `;
        elmHTML += `id="${id}" `;
        elmHTML += `placeholder="Key Test" `;
        elmHTML += `style="`;
        elmHTML += ` position: fixed;  top: 3rem;  left: 3rem;  right: 3rem;`;
        elmHTML += ` padding: 0.5rem 0.75rem;  margin: 0;`;
        elmHTML += ` box-shadow: 0 2px 30px 5px rgba(0, 0, 0, 0.9);`;
        elmHTML += ` border: 3px solid darkgoldenrod;  border-radius: 0`;
        elmHTML += ` font-size: 2rem;  font-family: monospace;`;
        elmHTML += ` background: white;  color: #3c3c3c;`;
        elmHTML += `" />`;
        document.body.innerHTML += elmHTML;
        
        const newKeytestElement = document.getElementById(id);

        if (!newKeytestElement) {
            throw new Error("Failed to find appended element");
        }
        return newKeytestElement;
    }

    const ktElm = appendInputElement("keytest_input");
    listeners.forEach((listener) => {
        ktElm.addEventListener(listener, keytestListenerFactory(listener))
    })
    
    return ktElm;
}

makeKeyTester_usage.js

(() => {

const events_key = ['keydown', 'keyup', 'keypress']
const events_mouse = ['mousedown', 'mouseup', 'click', 'mousewheel']
const events_pointer = ['pointerdown', 'pointerup']
const events_input = ['beforeinput', 'input']
const events_all = [
  events_key,
  events_mouse,
  events_pointer,
  events_input,
].flat();

function keyTestListener(listener, event) {
  if (!events_input.includes(listener)) {
    e.preventDefault();
  }
  console.log(listener, event);
  return false;
}

const keyTestElement = makeKeyTester(events_all, keyTestListener)

return { keyTestListener, keyTestElement };

})()