html - 在 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)

有没有办法让 iOS Safari 保持元素可见，即使软键盘打开，就像 Chrome 一样？

Answer 1

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

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

浏览器窗口似乎位于键盘后面，直到您滚动到最底部，在这种情况下，整个窗口“向上滚动”并且底部位于键盘 View 的顶部。

一旦我有了这个值，我就使用当前滚动值 (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'>