键盘覆盖webapp(iOS)中的文本输入

我正在开发一个webapp,在屏幕的下半部分有两个输入字段。 父视图绝对位于屏幕上。 通常,人们会假设在单击输入字段时,焦点会强制输入进入键盘上方的视图。 但是,键盘覆盖输入字段。

如果我开始输入,则不会向该字段输入任何内容。 为了输入字段,我必须点击下一个箭头,然后点击前一个箭头(>转到字段#2然后<返回到字段1)以获取输入以进行查看。

我已经尝试调整视图以使溢出滚动,位置相对和以编程方式设置焦点点击。 这些解决方案都不起作用。 不幸的是,我只能找到与UITextViews相关的答案和有完全相反问题的人(即不想让它自动滚动。)

对任何感兴趣的人都有简单

在您希望始终可见的输入上注册onfocus事件,如下例所示。 由于我们不知道键盘何时完全渲染,因此代码每300毫秒执行5次(持续时间为1.5秒)。 您可以根据自己的喜好调整它。

这个解决方案只有一点需要注意,它依赖于scollIntoView ,这可能不适用于某些旧浏览器(请参阅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); }; 
 

Some text here

Some text here

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

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

这可能不起作用,但值得一试。 否则你将不得不开始搞乱你的CSS和定位。 不幸的是,在某些情况下,iOS上的WebKit在重新定位和缩放窗口以显示输入字段和键盘方面存在问题。

这是在iphone safari虚拟键盘上输入时滚动到所选元素的类似问题的答案的引用

“好吧,所以这可能是你见过的最糟糕的黑客,但它什么都没有。

您可以做的是动态地(使用javascript)将文本框的位置更改为固定,位置:固定,这将更改文本框相对于浏览器窗口而不是页面的位置。 这应该使Iphone的滚动无关紧要,无论如何,你的文本框都应该在页面的顶部。 然后在onBlur上,css位置再次设置为相对(应该将其放回原位)。

为了使这个更漂亮,你可以在文本框onFocus后面放置一个div,这样它就会隐藏实际的网站内容,你可以使用top和left css属性将文本框置于中心位置(只需确保清除那些onBlur)。