我是否应该使用媒体查询和转换：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的输入，也许这是您需要了解的工作