JS - How to autoresize textarea based on input text mirrored from other textarea input?

Question

I am trying to achieve that textarea height is automatically adjusted based on length of text which is mirrored into in from input textarea. Can you please take a look where might be the issue? Thank you for your help.

http://jsfiddle.net/wshuni/vjwe39ah/93/

var titleInput = document.querySelector("#titleInput");
var bodyInput = document.querySelector("#bodyInput");
var title = document.querySelector("#title");
var body = document.querySelector("#body");

title.addEventListener('keydown', autosize);
body.addEventListener('keydown', autosize);
titleInput.addEventListener('keydown', autosize);
bodyInput.addEventListener('keydown', autosize);
             
function autosize(){
  var el = this;
  setTimeout(function(){
    el.style.cssText = 'height:auto; padding:0';
    // for box-sizing other than "content-box" use:
    // el.style.cssText = '-moz-box-sizing:content-box';
    el.style.cssText = 'height:' + el.scrollHeight + 'px';
  },0);
}



var input = document.querySelector("#titleInput");
var mirror = document.querySelector("#title");
var bodyInput = document.querySelector("#bodyInput");
var bodyMirror = document.querySelector("#body");

input.addEventListener('input', function(event) {
  mirror.innerText = event.target.value;
 
});

bodyInput.addEventListener('input', function(event) {
  bodyMirror.innerText = event.target.value;
 
});

explanation - image

Answer 1

You can do this by setting styles for bodyMirror textarea in the same function you use to resize bodyInput textarea.

var bodyMirror = document.querySelector("#body");

function autosize(){
  var el = this;
  setTimeout(function(){
    el.style.cssText = 'height:auto; padding:0';
    el.style.cssText = 'height:' + el.scrollHeight + 'px';
    bodyMirror.style.cssText =  'height:auto; padding:0';
    bodyMirror.style.cssText =  'height:' + el.scrollHeight + 'px';
  },0);
}

Answer 2

You should remove fixed height in body class and update the height of mirrored text area just after text is copied.

 var titleInput = document.querySelector("#titleInput"); var bodyInput = document.querySelector("#bodyInput"); titleInput.addEventListener('keydown', autosize); bodyInput.addEventListener('keydown', autosize); function autosize(){ var el = this; el.style.cssText = 'height:auto; padding:0'; // for box-sizing other than "content-box" use: // el.style.cssText = '-moz-box-sizing:content-box'; el.style.cssText = 'height:' + el.scrollHeight + 'px'; } var input = document.querySelector("#titleInput"); var mirror = document.querySelector("#title"); var bodyInput = document.querySelector("#bodyInput"); var bodyMirror = document.querySelector("#body"); input.addEventListener('input', function(event) { mirror.innerText = event.target.value; mirror.style.cssText = 'height:' + mirror.scrollHeight + 'px'; }); bodyInput.addEventListener('input', function(event) { bodyMirror.innerText = event.target.value; bodyMirror.style.cssText = 'height:' + bodyMirror.scrollHeight + 'px'; });

 .frame { width: 343px; height: 114px; background: rgb(255, 255, 255); box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1), 0px 2px 5px 0px rgba(0, 0, 0, 0.15); border-radius: 8px; }.title { font-family: Inter-SemiBold; position: relative; font-size: 16px; color: #21416C; font-weight: 600; height: 20px; line-height: 20px; width: 291px; word-wrap: break-word; border: none; resize: none; }.body { font-family: Inter-Regular; position: relative; font-size: 14px; color: #5C7999; font-weight: normal; /*height: 16px;*/ line-height: 18px; width: 311px; word-wrap: break-word; border: none; resize: none; }.card { /* Add shadows to create the "card" effect */ box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1), 0px 2px 5px 0px rgba(0, 0, 0, 0.15); transition: 0.3s; width: 343px; border-radius: 8px; background: #FFFFFF; height: auto; } /* On mouse-over, add a deeper shadow */.card:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); }.containerTitle { padding-top: 14px; padding-right: 36px; padding-bottom: 0px; padding-left: 16px; }.containerBody { padding-top: 2px; padding-right: 16px; padding-bottom: 16px; padding-left: 16px; } i { color: #1A67D2; font-size: 24px;important: /* 24px preferred icon size */ position; absolute: padding-top; 12px: padding-right; 12px: padding-bottom; 78px: padding-left; 307px; }

 <body style="background-color:#1A67D2;"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="containerTitle"> <textarea id="titleInput" rows='1' type="text" class="title" placeholder="Add title text..."></textarea> </div> <div class="containerBody"> <textarea id="bodyInput" rows='1' type="text" class="body" placeholder="Add body text..."></textarea> </div> <div class="card"> <i class="material-icons">close</i> <div class="containerTitle"> <textarea id="title" disabled rows='1' type="text" class="title" placeholder="Mirrored text - title..."></textarea> </div> <div class="containerBody"> <textarea id="body" disabled rows='1' type="text" class="body" placeholder="Mirrored text - body..."></textarea> </div> </div> </body>