当iOS Safari的软键盘打开时，如何保持固定的html元素在屏幕底部可见？

Question

在网页中，我有一个输入字段和一个固定在窗口底部的div (具有以下CSS属性：position:fixed;和bottom:0;

我创建了一个Codepen来展示我正在谈论的内容：https://codepen.io/anon/pen/xpQWbb/

Android上的Chrome即使在软键盘打开的情况下也会保持div可见：

​

​

然而，iOS上的Safari似乎将软键盘绘制在固定元素之上：

​

​

(值得一提的是，我正在我的Macbook上测试iOS模拟器，因为我没有一个可以工作的iPhone)

有没有办法让Chrome在软键盘打开的时候也保持元素可见，就像iOS是怎么做到的？

Answer 1

我最近在创建一个聊天输入时遇到了这个问题，这个聊天输入应该固定在页面底部。iOS键盘自然会显示在聊天输入的顶部。知道确切的键盘高度似乎或多或少是不可能的。我开始寻找一个可靠的值作为我的计算的基础，这样我就可以手动将聊天输入容器放置在键盘上。我想找出实际的"innerHeight“值，换句话说，就是网页当前可见的区域。由于iOS键盘的工作方式，在键盘打开的情况下获取该值的唯一方法似乎是滚动到页面的最底部，然后采样"window.innerHeight“。

所以，我在'click‘的输入栏上设置了一个事件监听器(因为'focus’给我带来了很多问题)。这将打开键盘，这需要一段时间，所以在我设置了1000ms的超时时间以确保(希望)我的键盘完全打开之后。1000ms后，我使用javascript快速滚动到页面底部，在此状态下保存"window.innerHeight“的值，然后滚动回我所在的位置。这给出了屏幕上可见区域的实际高度。

浏览器窗口看起来就像是放在键盘后面，直到你滚动到最底部，在这种情况下，整个窗口“向上滚动”，底部放在键盘视图的顶部。

一旦我有了这个值，我就使用当前滚动值(window.scrollY)加上我保存的值减去绝对定位元素的高度来确定放置它的位置。我选择在滚动时也隐藏输入，因为它在滚动时会弹来弹去。这样做的另一个缺点是，当页面在底部进行测量时，您会快速浏览页面。

我只是让输入比我需要的稍高一点，这样它就会在底部有一些“填充”。

​

var correctInnerHeight = window.innerHeight;
var isFocused = false;
var docHeight = $(document).height();
var input = $('.myInput');
input.click(function(e){
  isFocused = true;
  input.css('position', 'absolute');
  // Wait for the keyboard to open
  setTimeout(function(){
    docHeight = $(document).height();
    var lastScrollPos = $(document).scrollTop();
    // Scroll to the bottom
    window.scroll(0, $(document).height());
    // Give it a millisecond to get there
    setTimeout(function(){
      // Save the innerHeight in this state
      correctInnerHeight = window.innerHeight;
      console.log(correctInnerHeight);
      // Now scroll back to where you were, or wish to be.
      window.scroll(0, lastScrollPos);
      fixInputPosition();
      // Make sure the input is focused
      input.focus();
    }, 1);
  }, 1000);
});

input.on('blur', function(){
  input.css('position', 'fixed');
  input.css('top', 'auto');
  input.css('bottom', '');
  isFocused = false;
});

$(window).scroll(function(){
  fixInputPosition();
});

function fixInputPosition(){
  if(isFocused){
    var offsetTop = ($(window).scrollTop() + correctInnerHeight) - input.height();
    offsetTop = Math.min(docHeight, offsetTop);
    input.css('top', offsetTop);
    input.css('bottom', 'auto');
  }
};

body, html{
  margin: 0;
}
html{
  width: 100%;
  height: 2000px;
}
.myInput{
  position: fixed;
  height: 30px;
  bottom: 0;
  width: 100%;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' class='myInput'>

​

Answer 2

尝试在整个页面中使用position:absolute和height:100%。

当系统显示键盘时，它会在应用程序内容上对其进行plTaces。一种方法是同时管理键盘和对象，方法是将它们嵌入到UIScrollView object或它的一个子类中，如UITableView。请注意，当对文本字段进行内联编辑时，UITableViewController会自动调整其表视图的大小和位置。

显示键盘时，您所要做的就是重置滚动视图的内容区域，并将所需的文本对象滚动到适当的位置。因此，作为对UIKeyboardDidShowNotification的响应，您的处理程序方法将执行以下操作：

1.获取键盘的大小。

2.按键盘高度调整滚动视图的底部内容。

3.将目标文本字段滚动到视图中。

查看苹果开发者的指南了解更多信息：https://developer.apple.com/library/content/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html

Answer 3

我以前也经历过这种情况。我当时做的是：

1. 在点击键盘时设置监听器。
2. 点击键盘时使用屏幕高度-键盘高度调整网页视图的高度。
3. 要执行此操作，您需要确保html具有响应性。

我可以在IOS端展示更多的代码，如果你感兴趣，我可以编辑我的答案，并向你展示我的IOS代码。谢谢。

嗨，抱歉，我弄错了，我以为你是在创建带有webview的应用程序。如果你仍然想通过听键盘来做这件事，我仍然可以为你做一些工作。这可能不是完美的方法，但我相信如果你想尝试一下，它会起作用的。以下是我的建议：

1. 当键盘打开时，您仍然可以从网页获得监听程序。您可以通过jquery onkeyup或onfocus.
2. Then在您的文本字段中放置一个侦听器，您将知道何时输入被点击并且键盘将会显示。
3. 然后您可以在java脚本中创建一个条件来操作您的屏幕。

希望这能给你一个有见地的朋友。@Beaniie谢谢！

嗨，安德鲁！是的，正确的，我们不能知道键盘的高度，不像我用WebView的情况，我可以通过IOS代码知道键盘的高度。我有另一个工作，不是那么聪明，但可能会工作。你可以得到屏幕大小，并与IOS设备屏幕大小数组进行比较。然后，您可以通过测量IOS设备来缩小键盘高度。祝你好运朋友。