モバイル側がキーボードを起動したときにposition:fixedの位置決めを解除

移動端ボタンposition:fixed;底部bottom:0;
固定位置決め後、キーボードにデータを入力するように呼び出すと、頭が痛くなる問題が発生します.
下部に固定されたボタンは、システムに付属のキーボードに押され、入力ボックスの位置を占めます.
図:
ボタンを底に固定するにはどうすればいいか、後ろに2つの方法が見つかりました.
HTML

css

.submit {
    display: flex;
    width: 100%;
    justify-content: center;
    position: fixed;
    bottom: 0;
}

1.第1種
入力ボックスinputでフォーカスを取得/削除することでボタンのpositionスタイルを制御します.
js

$("input,textarea").focus(function(){
      $(".submit").css("position","static");
}).blur(function(){
   $(".submit").css("position","fixed");            
});

効果は実現しましたが、図のような問題が見つかりました.
キーが完全に表示されていないことがわかります.
2.第2種
resize()の理解が必要です
resize()メソッドによってresizeイベントがトリガーされるか、resizeイベントが発生したときに実行される関数を指定します.
js

var windheight = $(window).height();  /*            */
        
$(window).resize(function(){
   var docheight = $(window).height();  /*           */        
   if(docheight < windheight){            /*                   */
      $(".submit").css("position","static");
   }else{
      $(".submit").css("position","fixed");
   }           
});

実行後に効果を表示
喚起時:
キャンセル時:
これによりキーボードのような問題が完璧に解決され、もちろん他のシーンにも応用できます.
前端菜鳥、よろしくお願いします