JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" id="input-to-replace">
CSS
#input-to-replace{
opacity: 0.2;
/*you want display: none; or something else here, the opacity is
for you to see how it stays in sync*/
}
textarea{
display: block;
width: 300px;
height: 300px;
}
JavaScript
var inputToReplace = document.getElementById('input-to-replace');
var replacementTextarea = document.createElement("textarea");
document.body.appendChild(replacementTextarea);
var copyValueOver = function(){
// You may have to do some fancy encoding of newlines and other nasty bits, depending on what you expect to get.
inputToReplace.value = replacementTextarea.value;
};
// This bit may be quite tricky depending on where the data comes from and so on, change and keyup are easy and just to show the way
replacementTextarea.addEventListener('change', copyValueOver);
replacementTextarea.addEventListener('keyup', copyValueOver);