我想前端实现移动设备上软键盘弹出不将页面推上去，并且显示我的软键盘和输入框

为了实现移动设备上软键盘弹出不将页面推上去，可以使用以下 CSS 样式：

body {
  height: 100vh;
  overflow: hidden;
}

input:focus {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

这段 CSS 样式将页面设置为固定高度，并将 `body` 元素的 `overflow` 属性设置为 `hidden`，这样当软键盘弹出时页面不会被推上去。当输入框获得焦点时，使用 `position: absolute` 将其固定在页面底部，同时设置 `z-index` 为 `999` 让其显示在最上层。

同时为了让用户能够看到自己输入的内容，也可以在输入框下面添加一个提示框，以便用户知道自己输入的内容。例如：

<div class="input-container">
  <input type="text" placeholder="请输入内容">
  <div class="input-tip"></div>
</div>

然后使用以下 CSS 样式来设置提示框：

.input-container {
  position: relative;
}

.input-tip {
  position: absolute;
  bottom: 50px;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  z-index: 998;
}

这段 CSS 样式将提示框设置为与输入框同宽，并放置在输入框下方，同时使用 `box-shadow` 属性为其添加一些阴影效果，使其看起来更加立体。