при вводе на вводе в предварительном просмотре iframe следует автоматически прокрутить c и сфокусировать тот же тег

Question

У меня есть php файл ** (индекс. php) ** с формой. И у меня есть еще один php файл ** (template1. php) **, в котором данные будут отображаться из индекса. Теперь я использую iframe для показа превью template1. php на странице указателя. И я использую window.postMessage (), чтобы показать заполненные данные со страницы индекса в template1. php одновременно. Все работает хорошо. Но проблема в том, что поля формы очень большие, и если я наберу любое поле на странице индекса, мне придется вручную прокрутить вниз, чтобы увидеть набранный текст в template1. php. Теперь мне нужно, когда я нажимаю на ввод Business Specialty на странице индекса, затем идентификатор business_title в шаблоне 1. php должен автоматически прокручиваться, чтобы увидеть текст типа, так же как и для lo go.

<iframe src="templates/alltemplates/template1.php" height="200" width="300" id="myframe"></iframe> 

<form id="submit_form" action="#" method="post" enctype="multipart/form-data">
<div class="row"> 
<div class="col-md-6 mb-50">
<span class="input">
 <label class="" for="cf-email" style="font-weight: 500;">Upload Logo </label>
  <input class="input__field cf-validate" type="file" id="logo" name="logo" accept="image/png,image/jpeg" />
</span>
</div>

<div class="col-md-6 mb-50">
<span class="input">
<label class="" for="cf-email" style="font-weight: 500;">Business Speciality </label>
<input class="input__field cf-validate" type="text" id="business_title" name="business_title" maxlength="40" onkeyup="sendMessage(this.id,this.value);" />
</span>                                                
</div>

скрипт для window.postMessage:

function sendMessage(id,value) {
var pass_data = {
    'value':value,
    'id':id
};
var contentWindow = document.getElementById('myframe').contentWindow;
contentWindow.postMessage(JSON.stringify(pass_data), "templates/alltemplates/template1.php");
}

template1. php это:

скрипт:

<script>
 window.addEventListener('message',function(){
 var pass_data = JSON.parse(event.data);
 var id = pass_data['id'];
 var value = pass_data['value'];
  if(id != 'logo' && id != 'profilepic')
  {
  document.getElementById(id).innerHTML = value;
  }
  else if(id == 'logo')
  {
  var output = document.getElementById("logo");
  var src = '../../uploads/logo/'+value;
  output.innerHTML = "<img src="+src+" alt='heads' width='100%' height='auto' />";
  }
  });
    </script>