JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <input id="element" type="text" placeholder="Click me!">
</div>

 <div>
    <label>Events triggered
        <textarea id="log" cols="20" rows="10"></textarea>
    </label>
 </div>
    
<div>

CSS

#log {
    display: block;
}

JavaScript

var element = document.getElementById('element'),
    log = document.getElementById('log');

element.addEventListener('focus', function(e) {
    element.setAttribute('type', 'number');
    logEvent(e);
});
element.addEventListener('blur', logEvent);

function logEvent(e) {
    log.value += e.type + '\n';
}