键盘覆盖了 iOS 网页应用中的文本输入

Question

我正在开发一个Web应用程序，屏幕下半部分有两个输入字段。父视图的位置绝对固定于屏幕上。通常情况下，当单击输入字段时，焦点会强制将其移到键盘上方的视图中。然而，键盘正遮盖着输入字段。

如果我开始输入，输入框中就不会有任何输入。为了在该字段中输入，我必须点击下一个箭头，然后再点击上一个箭头（> 转到第二个字段，然后<返回第一个字段），才能将输入移动到视图中。

我尝试调整视图以具有溢出滚动、相对位置和在点击后编程设置焦点。但是，这些解决方案都没有起作用。不幸的是，我只能找到与UITextView相关的答案以及那些存在完全相反问题（即不想自动滚动的人）。

- Alex W

---

你解决这个问题了吗？我也遇到了同样的问题。我用scrollTop写了一点代码，但是它不太稳定。它对某些字段有效，而对其他字段无效。 - Justin Noel

Answer 1

对于任何对此感兴趣的人，以下是简单的解决方案：

在你想要始终可见的输入框上注册onfocus事件，如下面的示例。由于我们不知道键盘何时会完全渲染，因此代码每300毫秒执行5次（持续1.5秒）。您可以根据自己的喜好进行调整。

这个解决方案唯一的缺点是它依赖于scrollIntoView，它可能无法在一些旧浏览器上工作（请参见http://caniuse.com/#search=scrollIntoView）。当然，您可以用等效的算法替换它以实现相同的结果。无论如何，这个简单的解决方案应该能给你一个思路。

var scrolling = function(e, c) {
  e.scrollIntoView();
  if (c < 5) setTimeout(scrolling, 300, e, c + 1);
};
var ensureVisible = function(e) {
  setTimeout(scrolling, 300, e, 0);
};

<p>Some text here</p>
<input type="text" value="focus me" onfocus="ensureVisible(this)" />
<p>Some text here</p>
<input type="text" value="select me" onfocus="ensureVisible(this)" />

- t7tran

Answer 2

没有一个简化的代码示例很难说，但你可以尝试在第一个字段上注册一个点击处理程序，然后在其中将焦点集中到第二个字段，然后再次将焦点集中到第一个字段，在jQuery中看起来像这样：

$('#first_field').on('click', function(){
  $('#second_field').focus();
  $('#first_field').focus();
});

这可能不会起作用，但值得一试。否则，您将不得不开始处理CSS和定位。不幸的是，在某些情况下，iOS上的WebKit在重新定位和缩放窗口以显示输入字段和键盘时存在缺陷。

- thomasfuchs

Answer 3

这是一个类似问题的答案引用自在iPhone Safari虚拟键盘上输入时滚动到选定元素：

“好吧，这可能是你见过的最糟糕的黑客，但它总比没有强。

你可以使用JavaScript动态更改文本框的位置（使用position:fixed），这将使文本框的位置相对于浏览器窗口而不是页面。这应该使iPhone的滚动无关紧要，无论如何，你的文本框都应该位于页面顶部。然后，在失去焦点时，CSS位置再次设置为relative（这应该将其放回原位）。

为了使其更美观，你可以在onFocus时在文本框后面放置一个div，以隐藏实际站点内容，并可以使用top和left CSS属性居中文本框（只需确保在onBlur时也清除它们）。”

- Michael King

---

谢谢，但问题在于HTML输入标签，而不是本地的UITextField。 - Alex W

啊，我明白了。那我再做些研究。 - Michael King

Answer 4

我为文本框这个问题苦苦挣扎了8个多小时，尝试避免自己提升输入字段等解决方案。我解决了这个问题，将自动聚焦设置为true，但对于安卓设备将其设置为false。 getIOSdevice函数确定设备是否为IOS。 我的标记：

<textarea
  v-model="clientMessage"
  :placeholder="getLangSendMsg"
  id="textarea"
  rows="4"
  wrap="hard"
  :autofocus="getIOSdevice"
></textarea>

- Roman

Answer 5

这里有一个解决方案，已经测试过本地键盘和第三方键盘都可以正常使用：

    $('#foo').on('blur',function(){
        setTimeout(function(){
            window.scrollTo(0,document.body.clientHeight); 
　　  }, 300); 
    });

    $('#foo').on('focus',function(){
        setTimeout(function(){
            window.scrollTo(0,100000);
        }, 300); 

    });

$('#foo') 是你遇到问题的输入元素，关键在于为文档滚动设置一个 settimeout 延迟。因为我们需要一些时间让 iOS 键盘弹出完成，以便在弹出后获取正确的文档滚动顶部。

- Lying_cat

Answer 6

我找到了另一种解决方案适用于我的情况，这是我使用的JavaScript代码：

使用这个解决方案，当'myInputField'获得焦点时，页面会滚动到将'myInputField'置于页面中间的位置。

window.onload = function(){ 
    var inputField = document.getElementById('myInputField');
    inputField.onfocus = function() {
        inputField.scrollIntoView({ 
            behavior: 'smooth',
            block: 'center' 
        });
    }
}

- Federico Fefe Tiranti