capturing input before it's place practice

by ShaCP

HTML

<textarea id="ta">Default value</textarea>

<div>
<textarea id="ta2"></textarea>
</div>

<button id="putFocus">
Focus
</button>

CSS

#ta2 {
  position: relative;
  z-index: -1;
}

JavaScript

putFocus.addEventListener("click", () => ta2.focus());
ta.addEventListener("focus", () => {
if (ta.value === "Default value") {
  ta2.focus();
  }
});

ta2.addEventListener("input", (e) => {
if (ta.value === "Default value") {
ta.value = e.currentTarget.value;
} else {
ta.value = e.currentTarget.value;
ta.focus();
}
}
)

// I was trying to capture the input before it makes it to the top box (the bottom one would be
// hidden off screen). Trying to emulate the beforeinput event (some browsers don't support it.
// But, for different reasons, it doesn't really work.