位于虚拟键盘下方的iOS 7.1输入字段会强制缩放焦点

时间:2014-03-12 18:17:21

标签: javascript ios cordova ios7.1 ionic-framework

我正在使用Cordova编写聊天应用程序,聊天视图在页面底部有一个类似iMessage的输入字段。在iOS 7.0中,单击该字段会调整窗口大小并将输入字段放在键盘上方。在iOS 7.1中,单击输入字段只是从底部向上推动所有内容,并且不会调整窗口大小。

我的视口设置为:

<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, target-densitydpi=device-dpi" />
  • 当相对于顶部定位输入时,不会发生调整大小。但是,将输入定位得足够低以与键盘顶部对齐会导致无调整大小错误。这可以通过构建Ionic frosted glass demo并从

    更改页脚来复制

    <footer class="bar bar-footer bar-frosted"><button class="button button-clear button-positive" ng-click="add()">Add Message</button></footer>

    <footer class="bar bar-footer bar-frosted"><input name="testInput"></footer>

    在www / index.html

这会复制iOS7.1中的错误,并在iOS 7.0.x中按预期工作。我已经按照here的建议进行了操作,但他们的帖子已过时并且最终没有结束。提前感谢您的任何见解!

2 个答案:

答案 0 :(得分:0)

您是否尝试过明确设置宽度?就像提到here

<meta name="viewport" content="width=device-width">

答案 1 :(得分:0)

编辑:Ionic已将其修复为测试版4,因此这些hacky修复程序不一定是必要的:)最让Ionic团队认识到问题并修复它!

我现在要做的是和@ajsnaps回答above类似。我不认为它是好的解决方案,因为它有bug(类似于其他线程中指出的那些)。

当我弄明白时,我会尝试用更好的东西来更新它,如果有人提出更好的解决方案,我会保持开放状态。

$("input").on('focus',function(){ 

 //set brief timeout to let window catch up
 setTimeout(function(){

 //pull down the message area (scrollPane) and header (titleBar)
 //works on both 3.5" and 4" screens
 $("titleBar").css('top', '215px');
 $("scrollPane").css('top', '273px');

 },20); 

});

$("input").on('blur',function(){

 //set brief timeout to let window catch up
 setTimeout(function(){

 //push the top back up
 $("titleBar").css('top', '0px');
 $("scrollPane").css('top', '56px');

 },20); 

});

此外,我确保在从聊天视图导航回来后重置标题。

希望这有帮助!