JSFiddle - React, Tailwind, and code Playground

by ten1seven

HTML

<a href="#">A Link</a><br>
<button>A Button</button><br>
<input type="submit" value="A Submit Button"><br>
<input type="text">

CSS

a,
button,
input {
	outline: none;
}

.focus--keyboard {
	outline: 3px solid blue;
}

.focus--mouse {
	outline: 3px solid green;
}

JavaScript

var addEventListener = function(el, eventName, handler) {
	if (el.addEventListener) {
		el.addEventListener(eventName, handler);
	} else {
		el.attachEvent('on' + eventName, function() {
			handler.call(el);
		});
	}
};

var hasClass = function(elem, className) {
	return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
};

var addClass = function(elem, className) {
	if (!hasClass(elem, className)) {
		elem.className += ' ' + className;
	}
};

var removeClass = function(elem, className) {
	var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ') + ' ';

	if (hasClass(elem, className)) {
		while (newClass.indexOf(' ' + className + ' ') >= 0 ) {
			newClass = newClass.replace(' ' + className + ' ', ' ');
		}
		elem.className = newClass.replace(/^\s+|\s+$/g, '');
	}
};

var lastDeviceUsed = null;
var lastDeviceUsedWhen = null;

var body = document.getElementsByTagName('body')[0];
var allSelects = document.getElementsByTagName('a');
var allInputs = document.getElementsByTagName('input');
var allButtons = document.getElementsByTagName('button');
var allTextareas = document.getElementsByTagName('textarea');

var allTags = [];
allTags.push.apply(allTags, allInputs);
allTags.push.apply(allTags, allSelects);
allTags.push.apply(allTags, allButtons);
allTags.push.apply(allTags, allTextareas);

addEventListener(body, 'mousedown', function() {
	console.log('mousedown');

	lastDeviceUsed = 'mouse';
	lastDeviceUsedWhen = new Date().getTime();
});

addEventListener(body, 'keydown', function() {
	console.log('keydown');

	lastDeviceUsed = 'keyboard';
	lastDeviceUsedWhen = new Date().getTime();
});

for (var i = 0; i < allTags.length; i++) {
	addEventListener(allTags[i], 'focus', function(event) {
		console.log('focus');

		if (lastDeviceUsed != 'mouse' || new Date().getTime() - 50 > lastDeviceUsedWhen) {
			addClass(event.target, 'focus--keyboard');
		} else {
			addClass(event.target, 'focus--mouse');
		}
	});

	addEventListener(allTags[i], 'blur',...