<h1>Are Forms Secure?</h1>
<textarea rows=10 placeholder="Type something, then press backspace."></textarea>
<h2></h2>
<div id="history"></div>
* {
  font-family: Arial;
}

*:focus {
  outline: none;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: linear-gradient(to bottom, white, gray);
  height: 100vh;
  margin: 0;
}

textarea {
  font-size: 15px;
  padding: 10px;
  width: 50%;
  resize: none;
  border-radius: 10px;
}

h2 {
  background-image: linear-gradient(to bottom, red, maroon);
  -webkit-background-clip: text;
  color: rgba(0,0,0,0);
}

#history {
  width: 50%;
  height: 50vh;
  overflow-y: scroll;
}
const textarea = document.querySelector('textarea');
textarea.focus();
const h2 = document.querySelector('h2');
const history = document.querySelector('#history');

let count = 0;
let current;
let previouslyEmpty = true;
textarea.addEventListener('input', (e) => {

  if (previouslyEmpty) {
    h2.style.display = 'none';
  }
  
  if (e.data !== null) {
    current = textarea.value;
    count = 0;
    previouslyEmpty = false;
  } else if (e.data === null && count === 0) {
    capture();
  }
  
  if (textarea.value === '') {
    h2.textContent = 'Form history is not secure.'
    history.textContent = '';
    previouslyEmpty = true;
  }
});

textarea.addEventListener('select', (e) => {
  current = textarea.value;
  capture();
});

function capture() {
  h2.style.display = 'block';
  h2.textContent = 'Gotcha!'
  const para = document.createElement('p');
  para.textContent = current;
  history.prepend(para);
  count++;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.