我应该在移动键盘上方使用媒体查询和转换： translateY(-%) 吗？

Posted 2023-02-22

【中文标题】我应该在移动键盘上方使用媒体查询和转换： translateY(-%) 吗？

【英文标题】：Should I use media query and transform: translateY(-%) to above the mobile keyboard?

【发布时间】：2020-01-17 08:49:43

【问题描述】：

我被困了将近一天，我需要帮助。我不明白聊天网络应用程序是如何解决这个问题的......论坛中有很多关于这个问题的帖子：我需要这个页面组件上的页脚（或我的页眉）根据高度小于或等于手机高度，因此它始终为移动键盘做好准备。对于这个组件（而不是聊天窗口组件），我宁愿 (1) 屏幕上的标题 + (2) 不在键盘后面的文本框，而不是 (x3) 在使用键盘时将文本框放在屏幕底部已关闭（如果自动对焦会在移动设备上触发，我实际上想保持键盘打开）input textbox hidden & header hidden

以下是一些描述此问题的 *** 线程： 短/甜7/20/17 类似案例3/22/19 这些似乎有答案，但 are in jquery 我还不明白或 use 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

【参考方案1】：

好吧，在阅读您的问题标题后，我会说尝试使用媒体查询，看看结果是否是您想要实现的。如果不再回来 :O 如果您想尝试 input.focus 的东西，请查看此帖子 how react programmatically focus input 也许这是您需要了解您必须做什么的内容

【讨论】：

好的，谢谢，我会看的，但是你能帮我节省一些时间，告诉我当键盘输入时我应该使用什么脚本来向上移动页脚输入？

öhm 看看带有绿色赞成票的帖子评论，这是您可能想要实施并根据您的需求进行更改的评论。

我添加了 (1) onClick=this.focus ref=this.textInput 到输入，(2) this.textInput = React.createRef(); this.focus = this.focus.bind(this); 到构造函数和 (3) focus() this.textInput.current.focus(); 外部渲染类内！对我来说有点道理，但不......“工作”

我是experimenting with @media screen and (min-aspect-ratio: 13/9) .plan-form position: fixed; bottom:60%;

现在 <input onfocus= window.scrollTo(0, 0) /> 但它不起作用。越来越近了……