在移动设备上选择输入文本时不在屏幕中间居中答案

【问题标题】：Not centering input text in the middle of the screen when selecting it on mobile在移动设备上选择输入文本时不在屏幕中间居中
【发布时间】：2015-11-13 06:32:21
【问题描述】：

当您在移动设备上选择输入文本时，有没有办法不在屏幕中间居中？当它这样做时，您必须在按下回车后继续向上滚动才能阅读其上方的文本，这不好。

<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
</head>

//a div containing text from an ajax call after entering the input text
<input type = "text">

【问题讨论】：

您希望文本字段在屏幕上的哪个位置？
@DinoMyte 它在被选中之前的确切位置。
不确定你的意思，你能创建一个你的代码吗？
@DinoMyte 更好。我可以给你链接到我正在发生这种情况的实际网站。 www.chatwithibot.com

标签： php jquery html css mobile

【解决方案1】：

使用 css 将文本拉到您想要的位置。

将文本包装在 div 中，然后将其放置在您想要的位置。这样一来，您的 ajax 就不会对它的结束位置产生任何影响。

<div id="ajaxCall" class="fixText">
  Ajax call
</div>

以下属性可帮助您移动文本：

#ajaxCall{
  text-align: left;
  position: relative / absolute;
  margin-top / bottom: 0;
}

【讨论】：

【解决方案2】：

您是在谈论 iOS 在激活本机键盘时移动页面内容的方式吗？如果是这样，您可以尝试使用 JavaScript 来缓解。考虑监听输入以获得焦点，然后调整页面或特定元素的滚动位置。比如：

$(function() {
     $(input).focus(function() {
          $(document).scrollTop(500);
     });
});

（使用 jQuery）

【讨论】：

我可以不只是禁用 IOS 这样做而不是尝试估计吗？
另外，我不知道如何“监听输入以获得焦点”；因此，如果您也包含该代码，那就太好了。谢谢。
@jessica，在你的情况下，它将是 $("#lower input:text").focus(function() { $(document).scrollTop(500); });跨度>

【解决方案3】：

您可以通过 jquery animate() 函数尝试以下操作。此处滚动位置为400，因此您可能需要根据您的要求进行更改。

$(document).ready(function()
{         
$("#lower input:text").focus(function()
{
    $('html, body').animate({
        scrollTop: 400
    }, 2000);
});
});

这是一个实际的例子：http://jsfiddle.net/qggpjLqp/

【讨论】：