2012-12-10 106 views
2

我写了一个相当基本的js函数编程和自动完美对齐iPhone键盘的每个输入字段是被关注下方(感到自由,如果你喜欢它使用它!)。对准宏主要由window.scroll处理 - 在任何浏览器视图,该工作除了在UIWebView中因此的PhoneGap /科尔多瓦(2.1)的标准方法。 所以我需要一个解决方法window.scrollTo无法在phonegap中工作 - 替代解决方案或解决方法?

我的工作代码:

function setKeyboardPos(tarId) { 

//programmatically: set scroll pos so keyboard aligns perfectly underneath textfield 
var elVerticalDistance = $("#"+tarId).offset()["top"]; //i.e. 287 
var keyboardHeight = 158; 
var heightOfView = document.height; // i.e. 444 
var inputHeight = $("#"+tarId).outerHeight(); 

var viewPortSpace = heightOfView-keyboardHeight; //i.e. 180 
var verticalNewSroll = (elVerticalDistance+inputHeight)-viewPortSpace; 
if(verticalNewSroll<0) { verticalNewSroll = 0; } 
//// 

    //OK, all done lets go ahead with some actions 
    $("#footer").hide(); //hide footer so that the keyboard doesn't push it on top of textfield 
    $("#containingDiv").css("bottom","0px"); //remove bottom space for footer 
    window.scrollTo(0,verticalNewSroll); //scroll! where the problem starts 


} 

的一切,但UIWebView的工作,那是。正如我上面提到的,除了window.scrollTo(N.B.为了清晰起见,已经做了一些小的修改)之外的所有东西都可以工作。那么是否有人知道替代解决方案或甚至是一个很好的解决方法?

类似问题

window.scrollTo doesn't work in phonegap for IOS

PhoneGap/Cordova scrollTo Ignored

How to add vertical scroll in Phonegap

以上是还多少有些指向一个方向是正确的三个类似的问题。回答者之一提到使用css来完成这个。任何人都可以拿出更具体的例子吗? 另一个人建议锚点但这不是一个非常漂亮的解决方案,并且与我的其他代码不一致。

回答

3

在做了一些研究之后,我意识到window.scrollTo()实际上可以在iOS6中使用phonegap 2.1工作,但还有其他的失败;由于某种原因,document.height在UIwebView中没有产生一个等比例的属性,所以我不得不写一个小的解决方法。我将在下面发布解决方案和整个代码以供将来参考。

function setKeyboardPos(tarId) { 

//programmatically: set scroll pos so keyboard aligns perfectly underneath textfield 
var elVerticalDistance = $("#"+tarId).offset()["top"]; 
var keyboardHeight = 157; 

if(isNativeApp()) { keyboardHeight = 261; } //I choose to change the keyboard height for the sake of simplicity. Obviously, this value does not correnspond to the actual height of the keyboard but it does the trick 
var keyboardTextfieldPadding = 2; 
var heightOfView = document.height; 
var inputHeight = $("#"+tarId).outerHeight(); 

var viewPortSpace = heightOfView-keyboardHeight-keyboardTextfieldPadding; //180 
var verticalNewSroll = (elVerticalDistance+inputHeight)-viewPortSpace; 
if(verticalNewSroll<0) { verticalNewSroll = 0; } 
//// 

//OK, all done lets go ahead with some actions 
$("#footer").hide(); //hide footer so that the keyboard doesn't push it on top of textfield 
$("#containingDiv").css("bottom","0px"); //remove bottom space for footer 
window.scrollTo(0,verticalNewSroll); // perform scroll! 

} 

function isNativeApp() { 

var app = (document.URL.indexOf('http://') === -1) && (document.URL.indexOf('https://') === -1); 
if (app) { 
    return true; // PhoneGap native application 
} else { 
    return false; // Web app/safari 
} 

} 
1

你可以尝试用生命和财产scrollTop的滚动它看起来是这样的:

$("html, body").animate({ scrollTop: "The value to scroll to" }); 

希望这有助于。

+0

谢谢,但我只是意识到window.scrollTo()实际上确实在这里工作(在iOS 6中!),所以这实际上是不是罪魁祸首。 – Jonathan

0

你只需要使用:

$(window).scrollTop(0);