我是否應該使用媒體查詢和轉換：translateY（-％）到手機鍵盤上方？

Question

我被困了將近一天，我需要幫助。 我不明白聊天Web應用程序如何解決此問題……論壇上有很多針對此問題的文章：我需要此頁面組件上的頁腳（或頁眉）根據高度小於或等於A來移動手機高度，因此隨時可以使用手機鍵盤。 對於此組件（而不是聊天窗口組件），我寧願（1）屏幕上的標題+（2）文本框不在鍵盤后面，也不希望（x3）鍵盤時在屏幕底部顯示文本框已關閉（如果自動對焦會在移動設備上觸發，我實際上想使鍵盤保持打開狀態） 輸入文字框已隱藏 ＆ 標頭隱藏

這里是一些描述此問題的stackoverflow線程：簡短/甜蜜7/20/17類似的情況19/3/22這些似乎有答案，但在jquery中 ，我尚不了解或使用input.focus ，我不知道不知道將其放在reactjs中

CSS

.New_Plan_Header {
  position: fixed;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  z-index: 3;
  top:0%;
  width: 100%;
  border: none;
  height: 56px;
  width: 100%;
  background-color: #2fbaff;
  color: rgba(255, 255, 255, 0.644);
  font-family: "Muli", sans-serif;
  font-size: 26px;
  src: url(./UIConainers/Icons/Fonts/Muli-ExtraLight.ttf);
}
.plan-form {
  position: absolute;
  display: flex;
  height: 56px;
  width: 100%;
  bottom: 0%;
  color: #444;
  font-family: "Muli", sans-serif;
  font-size: 26px;
  padding-left: 56px;
  src: url(./UIConainers/Icons/Fonts/Muli-ExtraLight.ttf);
}

JS

<div className="New_Plan_Header">Plan</div>
<input
  type="search"
  className="plan-form"
  name="title"
  value={note.title}
  onChange={e => this.updateValue(e)}
  placeholder="Title"
  autoFocus={true}
  autoComplete="off"
  //onfocusin="transform: translateY(-600%), bottom:60%"
  />

感謝您的閱讀和事先的幫助

轉到src / UIConainers / Plans / planpages / plannew.js和plannew.css

Codesandbox

Answer 1

在閱讀完您的問題標題后，我會說可以通過媒體查詢進行嘗試，看看結果是否是您想要實現的目標。 如果沒有再回來：O如果您想嘗試input.focus的內容，請在這篇文章中查找如何以編程方式反應focus的輸入，也許這是您需要了解的工作