JQuery iOS 予測変換で重なるのを防ぐ

前提・実現したいこと

チャット機能を実装するWEBアプリケーションを作成しています。
Textareaにメッセージを入力する際、iOSの予測変換機能で入力エリアが隠れてしまいます。

textareaにフォーカスがあれば、marginを追加して、「送信」ボタンを押せば、marginをもとに戻すという処理を入れてみましたが、どうも見た目がきれいではありません。

予測変換が出てきたとき、自動的に高さを変えるような処理はありますでしょうか。
iOSキーボードの右上に「完了」ボタンを押したときの処理をいれたいのですが、トリガーがわかりません。方法ありあすでしょうか。

該当のソースコード


$(function() {
  // 画面読み込み時にchatをすべて追加
  $.each(gon.chats,function(index,chat){
    addChat(chat['speaker'], chat['body'], chat['created_at'])
  });

  //スクロールを一番下に
  $('#chatBlock').css('margin-bottom','150px');
  var a = document.documentElement;
  var y = a.scrollHeight - a.clientHeight;
  window.scroll(0, y+100);

  $("input.speak").on('click', function(e) {
    if(!$("#speak-contents").val()){
      return;
    }
    var speak_contents = $("#speak-contents").val()
    var temp_id = addChat('Staff', speak_contents, null, true)

    App.chat.speak($(e.currentTarget).data("id"), $("#speak-contents").val(), temp_id)
    $("#speak-contents").val('')
    $("textarea#speak-contents").height(30);//init

    $('#contentsFooter').css('padding-bottom','0'); //paddingをもとに戻す

  })

  //入力量に応じてテキストエリアの大きさ変更
  $("textarea#speak-contents").height(30);//init
  $("textarea#speak-contents").css("lineHeight","20px");//init

  $("textarea#speak-contents").on("input",function(evt){
      if(evt.target.scrollHeight > evt.target.offsetHeight){
          $(evt.target).height(evt.target.scrollHeight);
      }else{
          var lineHeight = Number($(evt.target).css("lineHeight").split("px")[0]);
          while (true){
              $(evt.target).height($(evt.target).height() - lineHeight);
              if(evt.target.scrollHeight > evt.target.offsetHeight){
                  $(evt.target).height(evt.target.scrollHeight);
                  break;
              }
          }
      }
  });


});

function addChat(speaker,body,created_at=null, temp=false, temp_id=null) {
  if(temp_id){
    $(`.kaiwa[data-temp=\"${temp_id}\"]`).remove();
  }
  return addChatTemplate(speaker, body, created_at, temp)
}

function removeChatTemplate(speaker, body, created_at, temp) {
  $("#position").remove();
}

function addChatTemplate(speaker, body, created_at, temp) {
  var content = $('#chatTemplate')[0].content
  var clone = document.importNode(content, true);
  var body_element = clone.querySelector('#body')
  var created_at_element = clone.querySelector('#created_at')
  var position_element = clone.querySelector('#position')
  var fragment = document.createDocumentFragment()

  body_element.innerText = body
  created_at_element.textContent = created_at
  if(speaker == 'Restaurant'){
    $(position_element).addClass('kaiwa-text-left')
  }else if(speaker == 'Staff'){
    $(position_element).addClass('kaiwa-text-right')
  }

  var temp_id = ''
  if(temp){
    temp_id = Math.random().toString(36).slice(-8);
    $(position_element).attr('data-temp', temp_id);
    $(position_element).addClass('sending')
  }

  fragment.appendChild(clone);
  document.querySelector('#chatBlock').appendChild(fragment);
  return temp_id
}

function scrolldown(){
  var a = document.documentElement;
  var y = a.scrollHeight - a.clientHeight;
  window.scroll(0, y+90);
}

//テキストエリアにフォーカスがあったときの処理
$(document).on("click", "textarea", function(){
    $('#contentsFooter').css('padding-bottom','25px');
});