JSFiddle - React, Tailwind, and code Playground

by ksoncan34

HTML

<input id="test" data-default="some text" value="some text"/>

JavaScript

const testEl = document.querySelector('#test');
let oldValue = 'some text';
let hasChanged = false;
testEl.addEventListener('focus', () => {
	console.log('Focus');
  if (testEl.value === oldValue) {
    testEl.value = '';
    hasChanged = false;
  } else {
    hasChanged = true;
  }
});
testEl.addEventListener('blur', () => {
if (!hasChanged) {
   testEl.value = oldValue;
}
	console.log('Blur');
});
testEl.addEventListener('change', () => {
  hasChanged = true;
	console.log('Change');
});