javascript - 单击文本框后，移动页面将移至上方

Question

我正在构建一个具有移动分支的站点。 我成功地构建了该站点，因为来自 PC 的许多浏览器都可以采用相同的 View 并且可以正常工作。

现在我开始构建网站，因为移动设备可以从移动版 chrome 或 Firefox 移动版浏览该网站。我这样做了，但我遇到了一个小问题。

该网站的许多页面都有文本框，如果您使用手机点击它就会知道 - 例如 galaxy note 2 - 软键盘会在屏幕上自行显示，在此过程中会发生两件事:

1- 屏幕将自行缩放，直到到达您单击的特定文本框。 解决方案:我通过这个命令解决它 ，所以现在屏幕不会自行缩放。

2- 如果我有一个包含文件的页面，主 div 将改变他的位置，直到到达上面的 div - 包含文件 - 并且大厅页面将不会被排序。

首先我会给她一个简短的例子来说明我的意思:

注意:我的后端是使用 Yii 框架的 php，仅供引用 ^_*

页面.php:

    <div id="div1" style="width:100%;position:relative;margin-bottom: 10px"><?php 

       if (Yii::app()->user->isGuest)
      include 'flash.php'; ?></div>


      <div id="div2" style="width:100%;position:relative;margin-bottom: 10px">
     <form action="getup" method:"post"> 
     <input type="text"  name="text1" >
     <input type="text" name="text2" >
     // submit button

      </form>

现在在这个简短的代码之后，我会告诉你到底发生了什么，当从移动 chrome 浏览器浏览页面时，页面将被排序，但是如果你点击任何文本框，例如 text1，发生的是 DIV2将自己向上移动到 DIV1 以上 -包含的文件- 因为软键盘会在屏幕的后半部分自行显示。

在这个例子之后我将反对我的问题:

我的问题是:是否有任何代码 - CSS 或 Java Script - 会停止软键盘在移动屏幕上显示后 DIV2 正在发生的上升过程？

Answer 1

也许此行为与您使用的 css 有关？尝试从您的内联样式中删除 position:relative ，也许它会有所帮助。另一件事是输入应该是自关闭标签，并且缺少 div2 关闭标签。您不需要将 div 标签的宽度设置为 100%，因为它是默认值。