单击文本框后，移动页面将转到上方

the mobile page will go above after clicking on the text box

本文关键字：文本 移动 单击      更新时间：2023-09-26

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

现在我正在构建网站，因为移动设备可以从移动 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 脚本 - 会在软键盘在移动屏幕上显示自己后停止 DIV2 发生的上升过程？

也许这种行为与您正在使用的 css 有关？尝试从内联样式中删除position:relative，也许它会有所帮助。另一件事是输入应该是自结束标签，而缺少div2 结束标签。您无需将div 标记的宽度设置为 100%，因为它是其默认值。

相关文章：