JSFiddle - React, Tailwind, and code Playground

by pmacmillan

HTML

<input type="text" value="something" id="one">
<input type="text" value="anything" id="two">

<textarea id="output" rows="20" cols="80"></textarea>

<button id="clear" type="button">
clear
</button>

<br />

Attempt to ignore spurious events?
<input type="checkbox" id="use_ignore">

JavaScript

console.clear()

var iOne = document.getElementById('one')
var iTwo = document.getElementById('two')
var output = document.getElementById('output')
var ignore = false

document
	.getElementById('clear')
	.addEventListener('click', function () {
		output.value = ''
	})
  
document
	.getElementById('use_ignore')
  .addEventListener('change', function () {
  	var el = this
    ignore = el.checked
    output.value = ''
  })

function print (text) {
	output.value += text
}

function println (text) {
	print(text + "\n")
}

var IGNORE_DURATION = 100

function watchEvent (id, eventName) {
  const el = document.getElementById(id)
  if (!el.lastEventMs) {
  	el.lastEventMs = 1
  }
  
	el.addEventListener(eventName, function (e) {
  	e.preventDefault();
      
    if (ignore && e.timeStamp < el.lastEventMs + IGNORE_DURATION) {
    	return
    }
      
    console.log(e)
    
    println('got ' + eventName + ' on ' + id + ' ' + e.timeStamp)
    el.lastEventMs = e.timeStamp
    
    return false
	}, true)
}

watchEvent('one', 'focus')
watchEvent('one', 'blur')
watchEvent('two', 'focus')
watchEvent('two', 'blur')